npm - @godxjp/ui-mcp - Versions diffs - 31.25.4 → 31.26.0 - Mend

@godxjp/ui-mcp 31.25.4 → 31.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/index.js +4 -4
package/package.json +2 -2

package/dist/index.js CHANGED Viewed

@@ -875,7 +875,7 @@ import { Flex } from "@godxjp/ui/layout";
 <CodeBlock maxHeight="sm" language="json" aria-label="Response body">{body}</CodeBlock>
 <CodeBlock size="xs" maxHeight="md" aria-label="Console">{consoleText}</CodeBlock>
-<CodeBlock copyable language="bash">pnpm add @godxjp/ui</CodeBlock>`,storyPath:"data-display/CodeBlock.stories.tsx",rules:[]},{name:"Markdown",group:"data-display",importPath:"@godxjp/markdown",tagline:"The one Markdown renderer for GoDX apps (sibling package `@godxjp/markdown`, versioned with the kit): GFM + GitHub heading anchors, one sanitiser schema (no raw HTML; http/https/mailto/relative URLs only), and ```mermaid drawn only after its SVG passes a fail-closed gate (gh#1108). Wrap it in `Prose`.",props:[{name:"children",type:"string",required:!0,description:"The Markdown source."},{name:"remarkPlugins",type:"PluggableList",description:"Host markers (callouts, embeds), run after GFM. Their output is still sanitised \u2014 allow marker attributes with `schema`."},{name:"schema",type:"{ tagNames?: string[]; attributes?: Record<string, \u2026> }",description:"Tags / attributes a host plugin needs. A rule for an attribute the base already constrains is MERGED into it (e.g. `code` `className` + `math-inline`), gh#1116. It can never widen the URL policy or bring raw HTML back."},{name:"resolveUrl",type:"(url, key) => string | undefined",description:"Map a host scheme (`asset:\u2026`, wiki links) to a real URL. Runs BEFORE the sanitiser, which then judges the result."},{name:"headingId",type:"({ depth, text, index }) => string | undefined",description:"Server-assigned anchors instead of GitHub slugs."},{name:"components",type:"Components",description:"Element overrides (react-markdown). Mermaid fences are drawn through the gate BEFORE a host `pre` is asked, so a host code renderer keeps Mermaid (gh#1116)."},{name:"rehypePlugins",type:"PluggableList",description:"Run AFTER the sanitiser \u2014 presentation only."},{name:"allowedElements",type:"string[]",description:"Narrow the elements a body may produce (with `unwrapDisallowed` to keep their text) \u2014 an activity feed showing only strong / em / del / code. Only removes; never allows what the schema strips (gh#1116)."},{name:"mermaid",type:"boolean",defaultValue:"true",description:"`false` keeps ```mermaid fences as code. Diagrams need the optional peer `mermaid`."}],usage:["DO `<Prose><Markdown>{body}</Markdown></Prose>` for every rendered body (wiki page, issue, mail).","DO record `MARKDOWN_FORMAT` and `RENDERER_VERSION` on stored versions.","DON'T assemble react-markdown + rehype-sanitize per app, add rehype-raw, or render Mermaid yourself \u2014 `checkMermaidSvg` is the gate."],related:["Prose \u2014 the typography wrapper this renders into.","MarkdownEditor \u2014 editing; its preview is this renderer.","CodeBlock \u2014 a single block of preformatted text, not a document."],example:`import { Prose } from "@godxjp/ui/data-display";
+<CodeBlock copyable language="bash">pnpm add @godxjp/ui</CodeBlock>`,storyPath:"data-display/CodeBlock.stories.tsx",rules:[]},{name:"Markdown",group:"data-display",importPath:"@godxjp/markdown",tagline:"The one Markdown renderer for GoDX apps (sibling package `@godxjp/markdown`, versioned with the kit): GFM + GitHub heading anchors, one sanitiser schema (no raw HTML; http/https/mailto/relative URLs only), and ```mermaid drawn only after its SVG passes a fail-closed gate (gh#1108). Wrap it in `Prose`.",props:[{name:"children",type:"string",required:!0,description:"The Markdown source."},{name:"remarkPlugins",type:"PluggableList",description:"Host markers (callouts, embeds), run after GFM. Their output is still sanitised \u2014 allow marker attributes with `schema`."},{name:"schema",type:"{ tagNames?: string[]; attributes?: Record<string, \u2026> }",description:"Tags / attributes a host plugin needs. A rule for an attribute the base already constrains is MERGED into it (e.g. `code` `className` + `math-inline`), gh#1116. It can never widen the URL policy or bring raw HTML back."},{name:"resolveUrl",type:"(url, key) => string | undefined",description:"Map a host scheme (`asset:\u2026`, wiki links) to a real URL. Runs BEFORE the sanitiser, which then judges the result."},{name:"headingId",type:"({ depth, text, index }) => string | undefined",description:"Server-assigned anchors instead of GitHub slugs."},{name:"components",type:"Components",description:"Element overrides (react-markdown). Mermaid fences are drawn through the gate BEFORE a host `pre` is asked, so a host code renderer keeps Mermaid (gh#1116)."},{name:"rehypePlugins",type:"PluggableList",description:"Run AFTER the sanitiser \u2014 presentation only."},{name:"allowedElements",type:"string[]",description:"Narrow the elements a body may produce (with `unwrapDisallowed` to keep their text) \u2014 an activity feed showing only strong / em / del / code. Only removes; never allows what the schema strips (gh#1116)."},{name:"shortCellLength",type:"number | false",defaultValue:"24",description:"A table cell whose trimmed text has no whitespace and at most this many characters (grapheme clusters) \u2014 a code, an id, a date, \u512A\u5148\u5EA6 \u2014 is stamped data-short, and Prose keeps it on one line (CJK otherwise breaks between ideographs in a narrow column). Sentences still wrap. false stamps nothing (gh#1150). Images in Prose table cells are capped at --prose-cell-image-max-inline-size (20rem) so a narrow table scrolls instead of squashing them."},{name:"mermaid",type:"boolean",defaultValue:"true",description:"`false` keeps ```mermaid fences as code. Diagrams need the optional peer `mermaid`."}],usage:["DO `<Prose><Markdown>{body}</Markdown></Prose>` for every rendered body (wiki page, issue, mail).","DO record `MARKDOWN_FORMAT` and `RENDERER_VERSION` on stored versions.","DON'T assemble react-markdown + rehype-sanitize per app, add rehype-raw, or render Mermaid yourself \u2014 `checkMermaidSvg` is the gate."],related:["Prose \u2014 the typography wrapper this renders into.","MarkdownEditor \u2014 editing; its preview is this renderer.","CodeBlock \u2014 a single block of preformatted text, not a document."],example:`import { Prose } from "@godxjp/ui/data-display";
 import { Markdown } from "@godxjp/markdown";
 <Prose measure="narrow">
@@ -891,7 +891,7 @@ import { FormField } from "@godxjp/ui/data-entry";
     onValueChange={setBody}
     upload={async (file) => ({ url: await storage.put(file), name: file.name })}
   />
-</FormField>`,docPath:"docs/data-entry/markdown-editor.tsx",storyPath:"data-entry/markdown-editor.tsx",rules:[]},{name:"Prose",group:"data-display",tagline:"Typography for rendered content (Markdown, CMS bodies, issue descriptions): styles the semantic HTML inside it from the tokens, with no opinion about where the HTML comes from. To RENDER Markdown, use the sibling package `@godxjp/markdown` inside it \u2014 `<Prose><Markdown>{body}</Markdown></Prose>` \u2014 the one GFM renderer + sanitiser + Mermaid gate shared by every GoDX app; do not assemble react-markdown + rehype-sanitize per app (gh#1108). Tables: `@godxjp/markdown` wraps each in `.ui-prose-table-scroll`, which Prose scrolls horizontally (focusable only while it overflows), and table cells keep their words whole \u2014 a short code like `F02` never breaks (gh#1131).",props:[{name:"size",type:'"sm" | "md"',defaultValue:'"md"',description:"Body size. `md` is the page body size (a wiki page); `sm` is the compact step (an issue description, a comment)."},{name:"imageSize",type:'"fit" | "original"',defaultValue:'"fit"',description:"`fit` scales images to the column; `original` shows them at their authored size and the container scrolls horizontally."},{name:"measure",type:'"narrow" | "medium" | "wide"',description:"Reading line length (gh#1112): caps the inline size at the `--page-measure-*` token \u2014 the same vocabulary and tokens as `Flex measure` / `PageContainer measure` (narrow 42rem, medium 48rem sit in the 45\u201375 character band). A cap, not a centred column: the body keeps its start edge under its heading. Use it on a document/wiki/decision body instead of narrowing the whole page column; title and metadata stay full width. Unset = full width."},{name:"children",type:"ReactNode",description:"The rendered content."},{name:"className",type:"string",description:"Extra classes on the container."}],usage:['DO import from `@godxjp/ui/data-display`: `import { Prose } from "@godxjp/ui/data-display";`',"DO wrap the OUTPUT of your Markdown pipeline (react-markdown + remark-gfm + rehype-sanitize), a sanitised CMS string via `dangerouslySetInnerHTML`, or plain JSX. Prose styles descendants: h1..h4, p, ul/ol/li, blockquote, code, pre, table/th/td, a, img, hr.","DO keep soft line breaks the pipeline's job (remark-breaks or the renderer's `breaks` option). Prose does not turn single newlines into `<br>`; it is typography, not parsing.","DON'T restate the heading scale, table cell measures or list rhythm with `[&_h1]:text-lg [&_td]:border \u2026` utilities: they copy token values and never follow a retune. Prose reads --heading-h1..h4, --table-cell-padding-* and --prose-* directly.","DO tune the link through --prose-link-color and --prose-link-decoration-line (gh#717). The ink defaults to hsl(var(--primary)) resolved at the anchor, so a scoped [data-tenant] re-tint reaches it; the resting underline defaults to `underline` and is a SEPARATE knob from --text-link-decoration-line, because Prose is running text and there the underline is a WCAG 1.4.1 requirement, not a taste.","DO style a state your own renderer knows about by marking the anchor and selecting it: `a[data-unresolved]` (a wiki link whose target does not exist yet), then re-declare --prose-link-color inside that selector. Prose writes data-* on its ROOT ONLY \u2014 never on a descendant \u2014 so every data-* on an `a` inside it is yours and stays selectable. That is a promise held by a test (prose-link-717.test.tsx), not a coincidence; there is no prop for it, the same way `TableRow data-expanded-row` is an attribute rather than an API.","DON'T sanitise inside Prose: it renders whatever HTML it is given. Sanitise before (rehype-sanitize, or the server).","DON'T use Prose for UI text (labels, descriptions, empty states): those are Text / Heading. Prose is for a document."],useCases:["A wiki page rendered from Markdown, at the page body size.",'A wiki page whose renderer marks links it knows something extra about: `<a data-unresolved="true">` for a target nobody has written yet, re-declaring --prose-link-color as --text-error inside `a[data-unresolved]` so it reads differently from a link that resolves.','An issue description or a comment in a tracker, `size="sm"`.',"A bug-report intake inbox that renders the report body (description, steps, environment table) sent by a browser extension.","A CMS article body delivered as sanitised HTML.","An email preview rendered from stored HTML."],related:["CodeBlock - a standalone block of preformatted text; Prose delegates its `pre` to the same tokens.","Text / Heading - UI copy, not a document.","LegalDocumentShell - a whole legal document with its own table of contents and section anchors; use Prose for the body of arbitrary rendered content.","ScrollArea - if a very long document needs its own scroll viewport, wrap Prose in ScrollArea."],example:`import { Prose } from "@godxjp/ui/data-display";
+</FormField>`,docPath:"docs/data-entry/markdown-editor.tsx",storyPath:"data-entry/markdown-editor.tsx",rules:[]},{name:"Prose",group:"data-display",tagline:"Typography for rendered content (Markdown, CMS bodies, issue descriptions): styles the semantic HTML inside it from the tokens, with no opinion about where the HTML comes from. To RENDER Markdown, use the sibling package `@godxjp/markdown` inside it \u2014 `<Prose><Markdown>{body}</Markdown></Prose>` \u2014 the one GFM renderer + sanitiser + Mermaid gate shared by every GoDX app; do not assemble react-markdown + rehype-sanitize per app (gh#1108). Tables: `@godxjp/markdown` wraps each in `.ui-prose-table-scroll`, which Prose scrolls horizontally (focusable only while it overflows), and table cells keep their words whole \u2014 a short code like `F02` never breaks (gh#1131).",props:[{name:"size",type:'"sm" | "md"',defaultValue:'"md"',description:"Body size. `md` is the page body size (a wiki page); `sm` is the compact step (an issue description, a comment)."},{name:"imageSize",type:'"fit" | "original"',defaultValue:'"fit"',description:"`fit` scales images to the column; `original` shows them at their authored size and the container scrolls horizontally."},{name:"measure",type:'"narrow" | "medium" | "wide"',description:"Reading line length (gh#1112): caps the inline size at the `--page-measure-*` token \u2014 the same vocabulary and tokens as `Flex measure` / `PageContainer measure` (narrow 42rem, medium 48rem sit in the 45\u201375 character band). A cap, not a centred column: the body keeps its start edge under its heading. Use it on a document/wiki/decision body instead of narrowing the whole page column; title and metadata stay full width. Unset = full width."},{name:"imagePreview",type:"boolean",defaultValue:"false",description:"Open the body's images in the kit image preview: click, Enter or Space on an image opens it, paging through the body's other previewable images in document order. Works on any HTML the body renders (@godxjp/markdown output included) with no img override; an image inside a link stays the link's and a kit Image keeps its own preview (gh#1150)."},{name:"children",type:"ReactNode",description:"The rendered content."},{name:"className",type:"string",description:"Extra classes on the container."}],usage:['DO import from `@godxjp/ui/data-display`: `import { Prose } from "@godxjp/ui/data-display";`',"DO wrap the OUTPUT of your Markdown pipeline (react-markdown + remark-gfm + rehype-sanitize), a sanitised CMS string via `dangerouslySetInnerHTML`, or plain JSX. Prose styles descendants: h1..h4, p, ul/ol/li, blockquote, code, pre, table/th/td, a, img, hr.","DO keep soft line breaks the pipeline's job (remark-breaks or the renderer's `breaks` option). Prose does not turn single newlines into `<br>`; it is typography, not parsing.","DON'T restate the heading scale, table cell measures or list rhythm with `[&_h1]:text-lg [&_td]:border \u2026` utilities: they copy token values and never follow a retune. Prose reads --heading-h1..h4, --table-cell-padding-* and --prose-* directly.","DO tune the link through --prose-link-color and --prose-link-decoration-line (gh#717). The ink defaults to hsl(var(--primary)) resolved at the anchor, so a scoped [data-tenant] re-tint reaches it; the resting underline defaults to `underline` and is a SEPARATE knob from --text-link-decoration-line, because Prose is running text and there the underline is a WCAG 1.4.1 requirement, not a taste.","DO style a state your own renderer knows about by marking the anchor and selecting it: `a[data-unresolved]` (a wiki link whose target does not exist yet), then re-declare --prose-link-color inside that selector. Prose writes data-* on its ROOT ONLY \u2014 never on a descendant \u2014 so every data-* on an `a` inside it is yours and stays selectable. That is a promise held by a test (prose-link-717.test.tsx), not a coincidence; there is no prop for it, the same way `TableRow data-expanded-row` is an attribute rather than an API.","DON'T sanitise inside Prose: it renders whatever HTML it is given. Sanitise before (rehype-sanitize, or the server).","DON'T use Prose for UI text (labels, descriptions, empty states): those are Text / Heading. Prose is for a document."],useCases:["A wiki page rendered from Markdown, at the page body size.",'A wiki page whose renderer marks links it knows something extra about: `<a data-unresolved="true">` for a target nobody has written yet, re-declaring --prose-link-color as --text-error inside `a[data-unresolved]` so it reads differently from a link that resolves.','An issue description or a comment in a tracker, `size="sm"`.',"A bug-report intake inbox that renders the report body (description, steps, environment table) sent by a browser extension.","A CMS article body delivered as sanitised HTML.","An email preview rendered from stored HTML."],related:["CodeBlock - a standalone block of preformatted text; Prose delegates its `pre` to the same tokens.","Text / Heading - UI copy, not a document.","LegalDocumentShell - a whole legal document with its own table of contents and section anchors; use Prose for the body of arbitrary rendered content.","ScrollArea - if a very long document needs its own scroll viewport, wrap Prose in ScrollArea."],example:`import { Prose } from "@godxjp/ui/data-display";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -2741,7 +2741,7 @@ const blocked = dateMatchModifiers(typed, disabledMatchers);`},{name:"CHART_COLO
 const changed = diffText(previous, current, { lang: "ja" }).filter((run) => run.kind !== "same").length;`},{name:"tokenizeText",kind:"function",subpaths:["./data-display"],signature:"(text: string, granularity?: TextDiffGranularity, lang?: string): string[]",tagline:"Cut a text into diff tokens: `auto` (Intl.Segmenter words, CJK runs per character), `word`, `char` (grapheme clusters) or `line` (lines with their newline).",usage:["DO use it to count or compare in the same units TextDiff shows; joining the tokens gives back the input exactly."],related:["diffText \u2014 the LCS over these tokens.","TextDiff \u2014 the rendered view."],example:`import { tokenizeText } from "@godxjp/ui/data-display";
-tokenizeText("\u6771\u4EAC\u90FD", "auto", "ja"); // ["\u6771", "\u4EAC", "\u90FD"]`}];function K(e){let t=e.trim().toLowerCase();return x.find(a=>a.name.toLowerCase()===t)}function _(e){return x.filter(t=>t.kind===e)}function Y(e){let t=e.trim().toLowerCase();return t===""?x:x.filter(a=>a.name.toLowerCase().includes(t)||a.tagline.toLowerCase().includes(t)||a.kind.includes(t)||a.subpaths.some(o=>o.includes(t)))}var C=[{name:"--wa-*",category:"primitive",tier:"primitive",role:"Neutral decorative Japanese accent primitives for charts/tags/decoration only."},{name:"--chart-1..6",category:"primitive",tier:"primitive",role:"Neutral decorative chart series palette. The @godxjp/ui/charts components (LineChart/BarChart/AreaChart/PieChart) read these by series index automatically \u2014 a service rethemes every chart at once by overriding --chart-1..6; per-series/per-slice overrides go through the component's series.color / colors props."},{name:"--space-0..12 / --space-20 / --space-24",category:"primitive",tier:"primitive",role:"Raw spacing scale, on the 4px grid and multiplied by --scaling. 0/4/8/12/16/20/24/32/40/48px, then the DISPLAY end: --space-20 (80px) and --space-24 (96px), named `n = px / 4` like every step below them. The scale used to stop at 48px, which is the ceiling of an admin screen and the floor of a marketing section, so website authors typed `padding-block: 5rem` instead. The two display steps are Carbon $spacing-11 and $spacing-12 exactly \u2014 docs/DESIGN-AUTHORITY.md makes Carbon the authority for spacing and carbon-scale-alignment.test.ts enforces it, so the scale grows TOWARD its authority. They are NOT generated from the golden ratio: the \u03C6 ladder (--phi-n2..--phi-p2) is an optional modular-SIZE utility, and semantic/layout.css has said since it was written that the spacing grid is linear because mixing the two left an incoherent density rhythm. Every --scaling-derived step is re-declared in styles/density.css and in `.ui-scale-fixed`; a new one that is not would FREEZE at :root."},{name:"--icon-size-{2xs,xs,sm,md,lg,xl,2xl,3xl,4xl}",category:"primitive",tier:"primitive",role:'Raw ICON scale \u2014 10 / 12 / 14 / 16 (md, the default) / 20 / 24 / 36 / 40 / 48 px. Icon was the last geometric axis with no scale: 28 component tokens declared raw numbers and between them used only these nine values, so this NAMES an existing vocabulary rather than inventing one. It is a FIXED LIST, not a `base * ratio^n` scale like --font-size-*, and deliberately so: 14/16 = 0.875 but 20/16 = 1.25, no single ratio generates the steps. Type can sit between pixels because hinting and antialiasing carry it; a 1px-stroke glyph cannot, so every step lands on a whole pixel at a 16px root. NOT --scaling-multiplied here: density is opted into by the tokens that want it (`calc(var(--icon-size-md) * var(--scaling))`, as --control-icon-size does), which keeps the scale itself the crisp whole-pixel list. TIER 1 vs TIER 2 \u2014 a value used in MORE THAN ONE place belongs on the scale and a service retunes it once; a value used in exactly ONE place (a 6px status dot) does NOT, and is set at the call site on that component\'s own --*-icon-size / --*-glyph-size token (`style={{ "--menu-icon-size": "6px" }}` or a `[data-\u2026]`-scoped theme rule). An inline custom property wins by inheritance proximity, so tier 2 never needs !important, a :root override, or a fork.'},{name:"--stroke-{hairline,sm,md,lg,xl,2xl}",category:"primitive",tier:"primitive",role:"Raw STROKE scale \u2014 the thickness of a painted LINE: 1 (hairline) / 1.5 / 2 (md, the emphasis stroke) / 3 / 4 / 6 px. The census called `width` the worst axis in the system at 91% raw; the census was right and the diagnosis was not, because `-width` is THREE concerns wearing one suffix \u2014 the thickness of a drawn line, the measure of a container (a dialog, a reading column, an auth card) and the content width of a field (how wide a picker must be to hold its longest label). Only the first is a vocabulary, and it repeats hard: six values across ~20 tokens spanning borders, focus rings, accent rails, selected-state markers and presence strokes. The other two are tier 2 by nature \u2014 their values appear in exactly one place \u2014 and are deliberately NOT on a scale. PX, NEVER REM: a stroke is a device line whose job is to read as one crisp rule at any type size, so it must not grow with the root font-size (`--slider-track-height: 0.375rem` is a different decision and stays put). NOT --scaling-multiplied: --scaling is a DENSITY knob, and a 1px divider at 0.92px would blur rather than tighten. --focus-ring-width is a member of this scale (`var(--stroke-md)`), so retuning line weight retunes the rings with it. --stroke-hairline sits BELOW --stroke-sm rather than being called xs because 1px is not really a step: it is the device hairline, the one thickness a service retunes the EXISTENCE of rather than the value (cardinal rule #44)."},{name:"--band-height-{xs,sm,md,lg,xl,2xl,3xl}",category:"primitive",tier:"primitive",role:"Raw BAND-HEIGHT scale \u2014 the vertical extent of a horizontal strip that content is centred in: 24 / 28 / 32 (md, the default control and row band) / 36 / 44 (the WCAG 2.2 AA touch floor, rule #24) / 48 / 56 px. `height` split the same way `width` did: a control, a table row, a menu item, a sidebar nav row and the app-shell top bar are ONE decision sharing seven values, each declared by two to five tokens, while a chart plot's height, a transfer pane's min-height and a popover's max-height are container measures chosen per surface with almost no repeated value and stay literal. The case for this is that `PageContainer`'s chrome band had no height token while `AppShell`'s bar did, so nothing could be aligned to it \u2014 the axis had no name. NOT A SUBSTITUTE FOR --control-height-*: the control tier is a RUNTIME LADDER (it multiplies by --scaling, steps \xB1--space-1 for sm/lg/xs, and `@media (pointer: coarse)` lifts the whole thing to the 44px tap floor); this scale is the STATIC vocabulary the ladder is ANCHORED on (`--control-height-default: var(--band-height-md)`), exactly as --font-size-base anchors the type scale. Point a band token at --control-height-* to \"reuse a step\" and you silently enrol it in density AND in the coarse-pointer growth \u2014 that is a geometry change, not a rename, and it is why --table-row-height-default reads var(--band-height-md) instead. NOT --scaling-multiplied here: whether a band breathes with density is a per-token decision (--control-height opts in, --app-shell-bar-height deliberately does not)."},{name:"--*-background / --*-color / --*-foreground / --*-tint \u2014 TWO VALUE FORMS",category:"semantic",tier:"semantic",role:"READ THIS BEFORE SETTING ANY COLOUR. A colour token holds EITHER bare HSL components (`--card: 60 33% 99%`, read at the call site as `hsl(var(--card))`) OR a complete CSS colour (`--card-tint: hsl(var(--primary) / 4%)`, read as `var(--card-tint)`). The name is not a signal and neither is the tier \u2014 `--menu-item-hover-background`, `--tree-node-hover-background` and `--table-row-hover-background` take a complete colour while `--segmented-item-hover-background` and `--topbar-item-hover-background` take components, five knobs for the same hover fill all defaulting to `--accent`; `--card-background` is components while `--card-tint`, three lines above it in the same rule, is a complete colour. Measured: 346 published tokens hold a colour \u2014 96 components, 249 complete \u2014 and 3 of them say so. THE WRONG FORM FAILS SILENTLY AND DOES NOT FALL BACK: the substituted declaration is invalid at computed-value time, so the property takes its own INITIAL value (`transparent` for a background) rather than the call-site fallback, and the surface shows whatever is behind it. Measured in Chromium: `var(--k, hsl(120 50% 50%))` with `--k: 0 100% 50%` computes `rgba(0, 0, 0, 0)`, and `hsl(var(--k, 120 50% 50%))` with `--k: rgb(255 0 0)` computes `rgba(0, 0, 0, 0)`. The DevTools tell: the custom property holds exactly what you wrote and the painted property is `rgba(0, 0, 0, 0)`. TO CHECK ONE KNOB, read its call site: `grep -rho 'hsl(var(--NAME\\|var(--NAME' node_modules/@godxjp/ui/dist` \u2014 `hsl(var(--NAME` is components, a bare `var(--NAME` is a complete colour. Grep `dist` whole, not just `dist/styles`: a few knobs (`--toast-background`) are read from a component's JS. SUB-TRAP: a components role may legally carry an alpha (`--card: 0 0% 100% / 42%`) but 83 declarations across 15 roles apply their own (`hsl(var(--accent) / 0.7)`), where a second `/` is a parse error \u2192 transparent. `--card` and `--popover` have no such reader; `--primary` (18 sites) and `--muted` (15) have the most. Cardinal rule 48. The rest of the complex-theme checklist: rule 49 (95 interaction-state tokens), rule 50 (a scoped theme must state its own `color`), docs/CUSTOMER-THEMING.md \"Building a COMPLEX theme\", docs/TOKEN-RESOLUTION.md \xA73 and \xA75."},{name:"--overlay-z-index",category:"semantic",tier:"semantic",role:"The ONE stacking layer every portaled overlay sits on \u2014 Tooltip, Popover, Select, DropdownMenu, Sheet (overlay AND panel), and since #319 also Dialog, AlertDialog and the CommandPalette, scrim and content alike. Each of those used to hard-code `z-50` independently, so an app that mounts the library under its own stacking context (a sticky masthead, a third-party chat widget) had to fight a separate literal per primitive \u2014 and whichever one it missed rendered underneath. Stacking is a SYSTEM decision, not a per-primitive one: raise every overlay together by overriding this once. Default 50, byte-identical to the literals it replaced. The DataTable sticky header deliberately stays BELOW it, so a menu opened from a sticky column header still wins. NOTE: overlays render into a portal on document.body, so a scoped `[data-tenant]` / `.dark` override must also sit on the portal container to reach them."},{name:"--font-size-*",category:"primitive",tier:"primitive",role:"Raw typography scale. `--font-size-display` is the BASE KNOB of the display ramp (`3xl`/`4xl`/`5xl` derive from it), so one declaration moves a marketing hero AND the two steps under it \u2014 never restate `--font-size-5xl`. It takes any length expression, so a FLUID hero is `--font-size-display: clamp(2.125rem, 4vw, 3.5rem)`; pinned at a single rem it paints the desktop size on a phone (measured: 56px at a 390 viewport where the brand scale said 34px). Pair with `--font-family-display`, and for a CJK product do NOT put a Latin-only face first in that stack \u2014 the browser falls through per glyph so it LOOKS fine, while the Latin inside a Japanese headline silently renders in a different face than the headline. Keep the CJK face as the display family and opt into the Latin face per element (eyebrow, price, code)."},{name:"--font-sans-base",category:"semantic",tier:"semantic",role:`The default sans face. FONT-AGNOSTIC by default (pure system stack) \u2014 the library ships no hardcoded brand font. Override this for one face everywhere. --font-family-sans defaults to it; --font-family-display / --font-family-body default to --font-family-sans (override those for a dual display+body brand). Consumers supply the actual @font-face (next/font, @fontsource, self-host); the opt-in @godxjp/ui/styles/fonts OVERWRITES this (and --font-sans-vi) with the bundled DXS stack \u2014 "Noto Sans JP" primary (incl. the Vietnamese coverage) with "M PLUS 2" as the fallback. Directly after "Noto Sans JP" the bundled stack names "Noto Sans JP Fallback" \u2014 LOCAL faces (Arial / Liberation Sans for Latin, Hiragino / Yu Gothic / Meiryo / Noto Sans CJK JP / IPAGothic for Japanese) metric-overridden to Noto Sans JP, so the cold-visit swap from fallback to brand face does not reflow the page (issue #475); if you restate the stack with the bundled faces, keep that name second. BUNDLE CHANGED IN v18.12.20 (product override, direct instruction): v16 bundled Noto Sans JP + Montserrat, v18.12.0\u201318.12.19 bundled M PLUS 2 + Noto Sans JP, v18.12.20+ bundles Noto Sans JP + M PLUS 2 \u2014 if a design spec names an earlier bundle's faces, set the tokens explicitly instead of relying on the bundle. IMPORT ORDER IS LOAD-BEARING: styles/fonts must be imported AFTER styles/base, because foundation.css declares this system-stack default on :root at the same specificity (0,1,0) and the later declaration wins (the all-in-one @godxjp/ui/styles entry already orders it correctly \u2014 issue #210).`},{name:"--font-sans-{ja,ko,vi,zh-hans,zh-hant}",category:"semantic",tier:"semantic",role:'Per-language font SLOT tokens. styles/base.css wires each [lang] to read its slot with --font-sans-base as fallback, so a consumer switches a locale\'s face by setting e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base)` \u2014 NO [lang] selectors to write. Empty by default. zh-hans matches lang zh|zh-Hans|zh-CN; zh-hant matches zh-Hant|zh-TW. Deciding which @font-face ships on which locale route is the consumer\'s font pipeline, not the library. The opt-in @godxjp/ui/styles/fonts only fills --font-sans-vi (with the bundled "Noto Sans JP", "M PLUS 2" stack); the other slots stay empty and fall back to --font-sans-base.'},{name:"--duration-{fast,base,slow}",category:"primitive",tier:"primitive",role:"Motion durations (150 / 250 / 500ms). Read these instead of a literal `0.5s` for enter/transition timing (rule #2). the reference design keeps motion short; honour `prefers-reduced-motion` at the call site. RE-THEMING: a brand that ships its own timing TABLE (press/hover/state/enter/hero-once) does not need a fork or new CSS \u2014 redeclare these three plus the four `--ease-*` and the two `--reveal-*` in its theme scope, and `Reveal`, Card `hoverable`, Dialog/Sheet enter and every token-driven transition retune themselves. A whole brand motion spec has been reproduced in EIGHT declarations; see the `brand-theme-block` pattern."},{name:"--ease-{standard,emphasized,decelerate,accelerate}",category:"primitive",tier:"primitive",role:"Motion easing curves. `standard` for most transitions, `emphasized` for entrances/overlays (the vaul drawer curve), `decelerate` for settling in, `accelerate` for exits. Read instead of a literal `cubic-bezier(\u2026)`."},{name:"--reveal-distance",category:"primitive",tier:"primitive",role:'Distance (10px) a revealed element travels on enter (translateY/-X). Read instead of a literal `translateY(10px)` for staggered reveals. A brand whose spec reads "hero once 480ms, 0\u21921, y8\u21920" sets `--duration-slow: 480ms` and `--reveal-distance: 8px` \u2014 the spec becomes two declarations.'},{name:"--reveal-stagger-step",category:"primitive",tier:"primitive",role:"One step (60ms) of the Reveal stagger ladder \u2014 `<Reveal delay={n}>` waits n \xD7 this before entering, so a column of reveals cascades. Read instead of a literal `.04s`/`.09s` per-item delay."},{name:"--duration-loop",category:"primitive",tier:"primitive",role:"The AMBIENT/LOOPING interval (1400ms) \u2014 the cycle member of the motion tier. `--duration-{fast,base,slow}` time a TRANSITION (A to B, then stop); a loop needs an interval, so every ambient affordance in the product breathes at one rate. `Activity` reads it through `--activity-interval`."},{name:"--activity-interval",category:"component",tier:"component",role:"Per-component override of the ambient loop interval (defaults to `var(--duration-loop)`). A service tunes its typing/sync rhythm without moving every loop in the product (cardinal rule #45). Declared in the MOTION tier (tokens/foundation.css) beside `--reveal-stagger-step`, not in tokens/components/activity.css, because component-token names must carry a geometry/colour property word and there is none for a duration."},{name:"--activity-stagger-step",category:"component",tier:"component",role:"Offset (160ms) between the three `Activity variant='dots'` marks \u2014 the LOOP counterpart to `--reveal-stagger-step`, named to match. In RTL the dots reverse with the flex row, so the cascade follows the reading direction with no extra rule. Declared in the motion tier for the same reason as `--activity-interval`."},{name:"--activity-mark-size",category:"component",tier:"component",role:"Diameter (0.25em) of one `dots` mark. `em`-based so the whole mark tracks `--activity-font-size-*` (and therefore `--font-size-base` and the density axis) instead of pinning a px per size step."},{name:"--activity-mark-offset",category:"component",tier:"component",role:"Travel (0.25em) of one `dots` step \u2014 the LOOP counterpart to `--reveal-distance`, named to match. It is ALSO the height the mark row reserves, so a dot at the top of its arc is never clipped and the row never grows mid-cycle."},{name:"--activity-mark-rest-alpha",category:"component",tier:"component",role:"Opacity (0.35) of a mark at the trough of its cycle. Deliberately never 0: a mark that vanishes reads as a rendering bug, and it is what makes the `prefers-reduced-motion` frame (animation dropped) land on a legible resting state."},{name:"--activity-pulse-mark-size",category:"component",tier:"component",role:"Diameter (0.5em) of the single `variant='pulse'` mark \u2014 bigger than one `dots` dot because it carries the whole affordance alone."},{name:"--activity-gap",category:"component",tier:"component",role:"Mark-to-mark and mark-to-label gap (defaults to `var(--space-1)`)."},{name:"--activity-font-size-{xs,sm,md,lg}",category:"component",tier:"component",role:"Root size ladder for `Activity`. The mark is em-based, so this ONE value scales the whole indicator; the steps mirror the `Text` size the label renders at, so mark and label stay optically paired."},{name:"--activity-bar-{width,height,radius,segment-width,track-alpha}",category:"component",tier:"component",role:"The indeterminate `variant='bar'` sweep: track measure (4rem \u2014 an inline measure beside a label, not a 100% fill), thickness, corner, the moving segment's share of the track (40%), and the track's tint alpha (0.2)."},{name:"--activity-color",category:"component",tier:"component",role:"Mark ink for `Activity`. ROLE-MIRROR KNOB \u2014 declared `initial` at :root with the role default at the CALL SITE (`hsl(var(--activity-color, var(--muted-foreground)))`), so a scoped `[data-tenant]` / `.dark` override of `--muted-foreground` still reaches it (docs/TOKENS.md \xB7 'Role-mirror knobs MUST be initial'). It retints the default `tone='muted'`; an explicit non-muted `tone` sets its own semantic role."},{name:"--shadow-color",category:"primitive",tier:"primitive",role:"RGB channels (space-separated, e.g. `12 26 49`) that tint the WHOLE elevation ramp (--shadow-xs..2xl) at once. Default `0 0 0`. Single-brand :root only \u2014 a scoped override does not re-resolve the ramp (the steps compute at :root); for a scoped/multi-tenant card lift set --card-shadow to a literal value."},{name:"--shadow-glow",category:"primitive",tier:"primitive",role:"Opt-in brand GLOW halo layered on the primary CTA's resting shadow. Default invisible (`0 0 0 0 transparent`, valid inside a comma shadow list). A service sets the whole value, e.g. `--shadow-glow: 0 8px 20px hsl(var(--primary) / .32)` \u2014 works scoped under [data-tenant] because the service declares it inside the scope."},{name:"--focus-ring-color",category:"primitive",tier:"primitive",role:"Themeable hue of EVERY keyboard-focus ring (HSL components, default var(--ring)). A leaf token, so it re-resolves at the element that paints the ring \u2014 override it once, even scoped under [data-tenant], to retint all focus rings. Pair with --focus-ring-weight (thickness) \u2014 NOT --focus-ring-width, which is derived; see its entry."},{name:"--focus-ring-width",category:"primitive",tier:"primitive",role:"DERIVED, do not set: `calc(var(--focus-ring-weight) * var(--focus-outline))` \u2014 the painted thickness, weight times the on/off switch. Setting it directly paints a ring even while the indicator is switched OFF, which is why src/tokens/__tests__/focus-ring-contrast.test.ts fails the build when any stylesheet rebinds it. Retune --focus-ring-weight instead."},{name:"--focus-ring-weight",category:"primitive",tier:"primitive",role:"THE thickness knob for every keyboard-focus ring; default var(--focus-outline-weight) = var(--stroke-hairline) = 1px, the light mark the ON state ships. Measured in Chromium: switched on it paints a 1px ring in the focus hue at 5.05:1 light / 7.07:1 dark, so WCAG 2.2 SC 1.4.11 (3:1) is met on thickness-independent grounds. For SC 2.4.13 Focus Appearance (AAA), which wants a >=2px perimeter, set --focus-ring-weight: var(--stroke-md) (2px, measured 2px painted, same hue and ratio); var(--stroke-lg) is the heavy 3px mark. Pair with --focus-ring-offset (gap, outline form only) and --focus-ring-color (hue)."},{name:'--focus-outline (axis: <html data-focus-outline="on">)',category:"primitive",tier:"primitive",role:'The one 0/1 switch for the whole keyboard-focus indicator, and it SHIPS OFF (0): nothing paints a focus mark by default, which forfeits WCAG 2.2 SC 2.4.7 (AA) and a JIS X 8341-3 AA claim \u2014 a product decision recorded with its cost in docs/DESIGN-AUTHORITY.md. A consumer turns it on with ONE attribute on the root element: <html data-focus-outline="on"> (AppProvider has the equivalent). Every painted focus length multiplies by it, so no per-component rebind can bring the mark back while it is off.'},{name:"--gradient-{brand,hero,glow}",category:"primitive",tier:"primitive",role:"Opt-in decorative gradient fills, default `none`. --gradient-hero paints the PageContainer header (hero banner); --gradient-glow paints the AppShell .app-main (ambient brand wash); --gradient-brand is a spare. A service sets the full gradient, e.g. `--gradient-glow: radial-gradient(60% 80% at 50% 0%, hsl(var(--primary) / .25), transparent)`."},{name:"--brand-glow{,-color,-alpha,-size,-position}",category:"primitive",tier:"primitive",role:'The decorative brand SPOTLIGHT \u2014 a radial brand halo behind a hero, a CTA band or an auth card, painted by the `.ui-brand-glow` utility class. USE THE CLASS; do not hand-write `radial-gradient(\u2026 hsl(var(--primary) / .18) \u2026)` on a page-local `.glow` div, which is what four separate marketing sections did while this shipped unreferenced (gh#826). Markup is one absolutely-positioned sibling inside a `position: relative` section: `<div className="ui-brand-glow absolute inset-0" />`; the class sets `pointer-events: none` itself, so it never steals a click from the copy above it. Tune without touching markup: `--brand-glow-color` (default `var(--primary)`), `--brand-glow-alpha` (0.18), `--brand-glow-size` (`60% 50%`) and `--brand-glow-position` (`50% 0%`, i.e. top-centre \u2014 set `88% -10%` to push the halo off the top-right corner). Override `--brand-glow` itself for a wholly bespoke gradient. Distinct from --gradient-{brand,hero,glow}, which are whole-fill values consumed by PageContainer and AppShell; this one is a standalone decorative layer you place.'},{name:"--primary",category:"semantic",tier:"semantic",role:"Action color role (HSL components, no hsl() wrapper). Re-theme it on :root OR a nested [data-tenant] scope: hover, press, the primary border and the field focus halo derive from it at the element that paints (see --primary-hover / --primary-active / --primary-border / --control-outline). In a NESTED scope also set --ring, which does not follow."},{name:"--primary-hover / --primary-active / --primary-border / --control-outline",category:"semantic",tier:"semantic",role:"The derived primary family (26.0.0, gh#678). Each is an `initial` knob: its colour is derived from the in-scope --primary at the painting element via `hsl(from hsl(var(--primary)) var(--<name>-channels))`, so a re-themed brand carries through hover, press, border and focus in both themes. OVERRIDE with your own `H S% L%` triplet as before. NEVER read one bare \u2014 `hsl(var(--primary-hover))` paints NOTHING; use the utility (`bg-primary-hover`, `text-primary-hover`, \u2026) or read with the fallback `hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))`. Retune the derivation by overriding `--<name>-channels` (e.g. `h s calc(l - 8.4)`). docs/CUSTOMER-THEMING.md \xA7Multi-tenant."},{name:"--ring",category:"semantic",tier:"semantic",role:"Focus colour role, default `var(--primary)` on :root / .dark. A public role read directly as `hsl(var(--ring))`, so it resolves where it is declared: a nested scope that overrides only --primary inherits the ROOT ring (the Input focus border stays the root hue while the halo follows). Set --ring alongside --primary in every nested tenant scope. Every focus ring and focus outline reads it through --focus-ring-color at the focused element (--focus-outline-color is an `initial` knob since 26.2.0, gh#687), so setting --ring in the scope retints keyboard focus there."},{name:"--brand / --brand-foreground",category:"semantic",tier:"semantic",role:'The IDENTITY role \u2014 the canonical GoDX emerald (light #009766 = oklch(0.595 0.137 162.94); dark lifts lightness only, #00b87c). It is what `<Logo mark="godx">` / `tone="success">` / the godx wordmark / the `@godxjp/ui/email` brand capsule paint, and it is distinct from THREE lookalikes: --primary (the ACTION colour \u2014 re-theme it freely, the mark never moves), --success (\u82E5\u7AF9 #68be8d, the STATUS green for badges/progress/"saved" text \u2014 the mark once borrowed this and shipped \u0394E76 \u2248 17.5 off canonical), and --text-brand (the blue brand-NUMERAL text slot behind the Tailwind `text-brand` utility). There is no `bg-brand` utility: `--color-brand` is already taken by --text-brand, so identity surfaces read `hsl(var(--brand))` directly in component CSS. Re-brand a service by overriding --brand once (scoped `[data-tenant]` works \u2014 every logo knob resolves it at the call site).'},{name:"--success",category:"semantic",tier:"semantic",role:'Success STATUS role (\u82E5\u7AF9 wakatake #68be8d) \u2014 badges, alerts, progress fills, timeline done dots, `tone="success"` text. NOT the product identity: the GoDX mark reads --brand.'},{name:"--warning",category:"semantic",tier:"semantic",role:"Warning status role."},{name:"--destructive",category:"semantic",tier:"semantic",role:"Destructive/error status role."},{name:"--info",category:"semantic",tier:"semantic",role:"Information status role."},{name:"--attention",category:"semantic",tier:"semantic",role:"Attention status role."},{name:"--surface-{success,warning,info,destructive}",category:"semantic",tier:"semantic",role:"The status SURFACE tier (gh#866) \u2014 the pale GROUND a toned surface paints, as a FINISHED colour (`#E8F5EF`), not HSL components. The other three status tiers are ink: FILL (--success), TEXT (--text-success), MARK (--mark-success); this is the ground they sit on. UNSET BY DEFAULT (`initial`) and it has no default of its own, because there is no single derived value it could carry: Alert washes its hue at 5%, Badge at 10%, the DataTable row tone at 6%, the EmptyState medallion at 12%, the toast color-mixes into --popover. Each surface keeps its own formula AT ITS CALL SITE behind the role \u2014 `var(--surface-success, hsl(var(--success) / var(--alert-bg-alpha)))` \u2014 so unset, everything paints exactly what it painted before (measured: 30/30 computed values byte-identical), and set on a scope, all nine consumers follow: Alert/Banner/Callout, Badge tone, Dialog/AlertDialog/Sheet header band, Toast, ChatBubble, DataTable row tone, EmptyState medallion, Flex surface=\"warning\", the Upload draft-undo strip. SET THIS WHEN A BRAND SHIPS INDEPENDENT PAIRS: `--success #126342` with `--success-soft #E8F5EF` is not a derivation \u2014 the mint is not that green at any alpha \u2014 and before this tier the only move was to lighten the success TEXT until its wash matched, damaging the ink to fix the ground. Declared `initial` rather than bound at :root so a scoped `[data-tenant]` reaches the component instead of freezing on <html> (docs/TOKENS.md \xB7 'Role-mirror knobs MUST be initial'). NO primary/attention entry (a brand ships soft pairs for the four statuses only) and NO border role \u2014 --alert-border-alpha and --chat-bubble-tone-border-alpha keep deriving the edge. CONTRAST: this library paints the TEXT tier on these grounds, which clears AA on the reference kit (6.22 / 5.48 / 6.64 / 7.34:1); the Callout RAIL is the FILL tier and measures 1.99:1 (success) and 1.62:1 (warning) there, under SC 1.4.11 \u2014 inherited, not introduced (2.12 / 1.69:1 on the derived tint), and repaired through --mark-*."},{name:"--border / --input",category:"semantic",tier:"semantic",role:"TWO roles, NOT synonyms \u2014 never set one to the other. --border is DECORATIVE chrome: table rules, card edges, section dividers, Separator. WCAG 2.2 SC 1.4.11 does not reach it (a divider is not \"required to identify a component or its state\") and this system's dense JP grid depends on it staying quiet \u2014 light `30 7% 83%`, dark `45 6% 22%`. --input is the CONTROL BOUNDARY: the 1px edge of Input/Textarea/Select/outline Button/TagInput/the composite date field/the topbar search (the Tailwind `border-input` utility reads it), plus the Switch's unchecked track fill. A field has no fill of its own and no shadow, so that edge is the whole visual claim that you may type there \u2014 it owes SC 1.4.11's 3:1 against EVERY surface a control sits on, not just the plain page: light `30 7% 53%` (3.47:1 on --background/--card/--popover, 3.18:1 on --muted/--secondary, 3.35:1 on a zebra row), dark `45 6% 47%` (4.22:1 on --background, 3.88:1 on --card/--popover, 3.17:1 on --muted). They shipped sharing one value and put every text field at 1.46:1. A service re-theming neutrals MUST move the two independently; `src/tokens/__tests__/input-boundary-contrast.test.ts` recomputes the ratios and fails below 3:1 or if the two roles are re-coupled. To quieten the Switch off-track without dragging --input back down, override --switch-unchecked-background instead."},{name:"--page-header-divider",category:"semantic",tier:"semantic",role:"PageContainer header bottom divider. Default none; a service theme opts in with `1px solid hsl(var(--border))`."},{name:"--page-footer-divider",category:"semantic",tier:"semantic",role:"PageContainer footer top divider \u2014 the third page-chrome band, on the same contract as `--page-header-divider` and `--page-toolbar-divider` (its rule used to be a hard literal in layout.css, so a page could not turn it off at all). Declared `initial` and resolved at the CALL SITE as `var(--page-footer-divider, 1px solid hsl(var(--border)))`, so a scoped [data-tenant]/.dark override still reaches it. It is the ONE chrome divider whose default is a RULE rather than silence, deliberately: `footer` is the shared slot a form's Save/Cancel bar lands in, where the line separating the actions from the page content is the behaviour every existing page already draws \u2014 the old literal IS the fallback, so unset is byte-identical. Set `--page-footer-divider: none` when the footer content already carries its own frame (a chat composer is a bordered Card, and the shell's full-width rule otherwise stacks a second line right above it)."},{name:"--overlay-background",category:"semantic",tier:"semantic",role:"Modal scrim \u2014 the single backdrop colour shared by every overlay (Dialog, AlertDialog, Sheet, Drawer, AppShell mobile nav). Default `rgb(0 0 0 / 0.5)`. A service tints it once, e.g. a navy `rgb(12 26 49 / .55)`. HOW IT REACHES AN OVERLAY: each surface declares its own `--*-overlay-background` knob `initial` and resolves a SHARE of this colour at the call site, `color-mix(in srgb, var(--overlay-background) var(--*-overlay-alpha), transparent)`, so the calibrated per-surface depth survives (Sheet/drawer 40% = 0.2, Dialog 60% = 0.3) while ONE override here retints them all. NOTE: portaled overlays render outside a [data-tenant] subtree, so for multi-tenant scoping put the tenant attribute on the portal container too."},{name:"--page-toolbar-{background,pad-block,divider}",category:"semantic",tier:"semantic",role:"PageContainer `toolbar` band chrome \u2014 the FIXED strip between the page header and the (scrolling) body. All three knobs are quiet by default (rule #44). `--page-toolbar-background` (default `transparent`) is the band's GROUND: set it ONCE in a service theme \u2014 `--page-toolbar-background: hsl(var(--card));` \u2014 to lift the band off the page ground the way a chat channel's workflow rail or a collection's filter strip usually wants. It is bound at `:root` rather than `initial` because its default is a plain CSS keyword, not another role token, so there is nothing for a scoped override to re-resolve; it is the `background` shorthand, so a gradient works too. NEVER write `className=\"bg-card\"` on the strip at the call site \u2014 that is hand-laid page chrome, it is invisible to per-tenant theming, and it paints the strip rather than the band (so it misses the page gutters and the `measure` cap). `--page-toolbar-pad-block` (default 0) is the band's own block inset. It is the band's ONLY breathing room: the band sits FLUSH against the header and the body (the container's band gap is cancelled on the band itself \u2014 chrome is attached, not a third section floating between two voids), so there is no outside space to tune. It stays 0 even now that the band can be painted: a TRANSPARENT band is not a surface and has no inside for an inset to breathe, and under `fill` every pixel of band height is taken from the scroll viewport the slot exists to protect. The corollary is that a theme which PAINTS the band must also set the inset here (`--page-toolbar-pad-block: var(--space-2)`) \u2014 the two go together, and neither belongs in a `py-*` utility at the call site. `--page-toolbar-divider` is declared `initial` and resolved at the CALL SITE as `var(--page-toolbar-divider, var(--page-header-divider))` \u2014 so ONE `--page-header-divider` opt-in rules the whole page chrome consistently, a scoped [data-tenant]/.dark override of it still reaches the band (a `:root` binding would freeze it), and `--page-toolbar-divider: none` silences just the band. `variant=\"ghost\"` keeps the divider quiet regardless (it does NOT clear the background \u2014 ghost is about rules and pads, not grounds). The band's inline gutters and its `measure` cap are shared with the header and body \u2014 they are not separate knobs, which is what keeps the three bands aligned."},{name:"--page-title-font-size-chrome",category:"semantic",tier:"semantic",role:'PageContainer title step under `headerScale="chrome"` \u2014 a page whose top row IS chrome (a chat channel name, a mail subject, an IDE tab) rather than a document title. Default `var(--heading-h3)` = `--font-size-base` (14px), the body step, so the row reads as a label ON the surface instead of the page\'s headline; a consumer chat header measured 61px with a 20px h1 against a design that wanted ~40px at the `sm` step. Deliberately a THIRD knob beside `--page-title-font-size` / `--page-title-font-size-compact`: those two are one document title at two viewport sizes (a responsive step), this is a different KIND of page and holds at every width \u2014 the compact rule must not pull a chrome header back up to h2. Read ONLY when the prop is passed, so a document page never touches it (rule #44). A service retunes the chrome step here once; never override `--page-title-font-size` at a call site to fake it.'},{name:"--page-subtitle-font-size-chrome",category:"semantic",tier:"semantic",role:'PageContainer SUBTITLE step under `headerScale="chrome"` \u2014 the caption under a chrome top row (a channel purpose line, a mail preview), not a document\'s standfirst. Default `var(--font-size-2xs)` (ratio\u207B\xB2, ~11px), two steps below the document default `--font-size-base`. It is a fourth knob beside `--page-subtitle-font-size` / `-compact` for the same reason the title step is: those two are ONE document subtitle at two viewport sizes, this is a different KIND of page and holds at every width \u2014 and it has to out-rank the 720px compact rule, which is already a compound selector, or a chrome caption would step back UP on a phone. Two things it fixes at once. Hierarchy: at the document step the chrome subtitle rendered at `--font-size-base`, the IDENTICAL step the chrome TITLE takes, so a channel name and its purpose line read as one undifferentiated block. Height: the step drives the LINE BOX at the inherited `--line-height-body` (14px x 1.7 = 23.8px vs 11px x 1.7 = 18.9px), so a band whose whole point is to leave room for the transcript stops spending ~5px of it on a caption. Type only \u2014 line-height, colour and weight stay with the base rule, so a wrapped JA/VI purpose line keeps its rhythm. Read ONLY when the prop is passed (rule #44); a service retunes the caption step here once, never with a `text-*` utility at the call site.'},{name:"--page-pad-block-start-chrome",category:"semantic",tier:"semantic",role:"PageContainer TOP inset under `headerScale=\"chrome\"` \u2014 the second half of the same fact the title step answers: chrome sits ON the frame's edge. Default `0px`, so a chrome page opens flush; a document page keeps `--space-page-active-y` (24px, 16px below the 720px step) because a title needs air above it. Measured on a consumer chat screen: an otherwise correctly-sized channel head started at y=24 against a design that starts it at y=0, and those 24px came straight off the transcript viewport (617px in the design, 587px in the app). It is a knob rather than a literal (rule #44) so a service whose grid wants its chrome inset writes `--page-pad-block-start-chrome: var(--space-2)` once instead of forking the page shell, and it is read ONLY when the prop is passed, so no document page resolves it. Block-start only \u2014 the page's bottom edge belongs to `stickyFooter`, which zeroes it for its own reason."},{name:"--page-header-min-block-size-chrome",category:"semantic",tier:"semantic",role:"PageContainer BAND HEIGHT under `headerScale=\"chrome\"` \u2014 the third half of the same fact the title step and the flush top edge answer. A document header is content-height, correctly: a title is as tall as the title is. Chrome is furniture, and furniture needs a band that things centre INTO. Without one, the band's vertical centre is a function of its own copy \u2014 measured in Chromium on the catalogue page, 42.02px with an `extra` control and 40.38px without \u2014 so nothing in the page can be aligned to it and no service can aim at a number. Default `auto` (rule #44, the quiet state): no floor, content-height, byte-identical to every page shipped before the token existed, chrome pages included. The BAND-HEIGHT AXIS HAS ONE OWNER and it is `--app-shell-bar-height` (`--centered-shell-bar-height` already reads it), so the one line a service writes to put its page chrome on the shell bar's band is `--page-header-min-block-size-chrome: var(--app-shell-bar-height)` \u2014 the band becomes 48px and the title column and `extra` both centre at y=24 regardless of copy length. It is NOT that value by default because a chrome `PageContainer` is not necessarily inside an `AppShell` (the canonical chat composition renders one inside a bordered region, a SplitPane pane, a Card), and a band that is not trying to line up with a bar has no business inheriting that bar's height. A MIN, never a height: a taller `extra` (an `lg` control, a wrapped JA/VI channel name) still fits instead of overflowing. The header's own `--page-header-pad-bottom` lives INSIDE the band (border-box); under the canonical chrome composition (`variant=\"ghost\"`) that pad is 0 and the centring is exact."},{name:"--page-header-pad-bottom",category:"semantic",tier:"semantic",role:"PageContainer header bottom inset. Defaults to page top padding minus the section gap so the title band is vertically balanced."},{name:"--master-detail-rail-{compact,standard}",category:"semantic",tier:"semantic",role:"MasterDetail fixed rail track \u2014 18.75rem (300px) / 20rem (320px). The `railWidth` prop picks the preset; a service theme retunes the presets themselves. Consumers never author a grid track."},{name:"--master-detail-gap",category:"semantic",tier:"semantic",role:"Gap between the MasterDetail master and detail regions (default --space-stack-md), side by side and stacked."},{name:"--master-detail-collapse-below",category:"semantic",tier:"semantic",role:"MasterDetail stacking threshold (default 40rem / the `sm` step), measured against the composition's OWN inline size, not the viewport: wider keeps the split, narrower stacks master above detail. A real knob \u2014 the layout resolves it inside a flex-basis calc(), because a media/container-query CONDITION cannot read a var(). The `collapseBelow` prop overrides it per instance (rule #45)."},{name:"--master-detail-master-viewport-{compact,standard}",category:"semantic",tier:"semantic",role:'Bounded MasterDetail master viewport \u2014 20rem (320px) / 28rem (448px), selected by the semantic `masterViewport` prop. `masterViewport="auto"` (the default) applies NO bound, so existing compositions are unchanged; the presets cap the collection\'s block size and scroll it INSIDE the region, which is what stops a long real collection from pushing the detail below the fold once the layout stacks. Retune the presets in a service theme exactly like --master-detail-rail-*; never author a pixel max-height in consumer CSS.'},{name:"--master-detail-master-viewport-inset",category:"semantic",tier:"semantic",role:"Focus-ring room inside a bounded MasterDetail master region (default --space-1 / 4px), and its scroll-padding. An overflow container clips BOTH axes, so without this inset the focus ring of a row at the region's edge would be cut off; it also keeps a row scrolled into view off the clip edge. Only applies when `masterViewport` is compact/standard."},{name:"--page-header-extra-measure",category:"semantic",tier:"semantic",role:'Inline measure of the PageContainer header `extra` region while `headerLayout="responsive-inline"` and the page is below the 640px step (default 11rem / 176px). The default `headerLayout="stack"` never reads it \u2014 `extra` keeps wrapping onto its own full-width line under the subtitle. At >=640px both arrangements are identical, so this token only governs the compact range.'},{name:"--space-section-{band,hero}",category:"semantic",tier:"semantic",role:'The MARKETING BAND rhythm \u2014 the block-axis padding of a full-bleed section band (--space-section-band, 80px = --space-20) and of the hero band that opens the page (--space-section-hero, 96px = --space-24). Not to be confused with --space-section (16px), which is the gap BETWEEN the blocks of one admin page. Named --space-section-* and NOT --space-band-*: `band` already means "the vertical extent of a control or row" in this library (--band-height-*, rule #24), and a second meaning for the same word is the drift check:prop-vocabulary exists to stop. Both alias the linear --space-* grid rather than the \u03C6 ladder, for the reason semantic/layout.css states at the top of the block, and both are re-declared in styles/density.css because a knob that aliases a --scaling-derived step and is not re-derived in a descendant density scope freezes at :root (docs/TOKENS.md). A fluid band clamps BETWEEN the two rather than inventing a third value.'},{name:"--page-measure-{narrow,medium,wide}",category:"semantic",tier:"semantic",role:'Bounded PageContainer MEASURE presets \u2014 42rem (672px) / 48rem (768px), selected by the semantic `measure` prop. `--page-measure-wide` (72rem / 1152px outer, 1104px surface) is the MARKETING measure and is the one member with NO `measure` branch yet: it is the vocabulary a full-bleed landing composition caps its own shell with, added because two unrelated website showcases each hand-wrote 1200px / 1140px when the widest name here was 768px. The industry wide-container cluster runs 1136-1320px (Radix Container 4 = 1136, Tailwind max-w-7xl and Primer .container-xl = 1280, Bootstrap = 1320); 72rem is Tailwind --container-6xl and sits between the two measured showcase values. Do not give a reading column a wide measure \u2014 prose stays at narrow/medium, which bracket Bringhurst\'s 45-75 character band. They are OUTER measures: the package-owned page gutters (--space-page-active-x, 24px each side) sit INSIDE the cap, so the VISIBLE surface is 624px / 720px, and at 390px nothing binds (358px surface at the 16px compact gutter). Unlike variant="narrow" \u2014 which caps only .ui-page-body \u2014 the measure caps the page HEADER and the BODY together, so a header `extra` action ends flush with the body surface. `measure="default"` (the default) reads NEITHER token and matches no rule, so existing pages are unchanged. Retune the presets in a service theme; never author a page-local max-width.'},{name:"--badge-space-*",category:"component",tier:"component",role:"Badge spacing."},{name:"--button-count-{min-width,space-inline,font-size} / --button-count-{background,color} / --button-count-{default,destructive,secondary}-{background,color}",category:"component",tier:"component",role:"Button's COUNTER PILL (`count` / `overflowCount` / `showZero`). The COLOUR knobs exist because the pill used to tint itself translucently over whatever surface the button happened to have (`bg-primary-foreground/15` on filled variants, `bg-foreground/8` on the outline family), which means its contrast was a FUNCTION of that surface rather than a property of the pill \u2014 and five variant x theme x hover combinations measured below the 4.5:1 that WCAG 2.2 SC 1.4.3 requires of small text: default 3.88 light, destructive 4.29 dark, and the outline family 4.32 light at rest, 3.64 light on hover, 3.68 dark on hover. The two worst were HOVER states, which is exactly why a screenshot sweep never found them: `--accent` only exists under the cursor. The fix is the treatment validated on Toggle: OPAQUE role fills, so the ratio no longer depends on the variant or on hover. Each filled variant wears its OWN label pair SWAPPED (default --primary on --primary-foreground = 5.04 light / 7.07 dark; destructive 6.10 / 5.53; secondary 14.25 / 12.40), which makes the pill exactly as legible as the label beside it and impossible to make worse without making the button itself unreadable first \u2014 a promise a fixed colour could not make across re-themes. The outline family shares one pill, --foreground on --muted (14.25 / 12.40), whose --muted fill sits 1.09:1 against the button's own ground, so at rest the counter still reads as quiet text rather than a badge: it is the legibility of the DIGITS that rose, not the loudness of the pill. All eight colour knobs are ROLE-MIRROR knobs -- `initial` at :root with the role default at the CALL SITE -- so a scoped `.dark`/`[data-tenant]` override of the role reaches the pill. The geometry knobs are byte-identical to Toggle's, asserted by a token-parity test."},{name:"--toggle-count-{min-width,space-inline,font-size,radius,gap} / --toggle-count-{background,color} / --toggle-pressed-count-{background,color} / --toggle-pressed-border-color / --toggle-count-forced-outline-width",category:"component",tier:"component",role:"Toggle's COUNTER PILL (`count` / `overflowCount` / `showZero` / `countLabel`) \u2014 the counted, PRESSED chip Button could not express. SHARE vs SPLIT is the whole point of this group. GEOMETRY is shared: the five geometry knobs carry Button's exact counter values off the same primitive scale (var(--space-4) / var(--space-1) / var(--font-size-xs) / var(--radius-pill) / 0), so a Toggle count set beside a Button count measures identically in a browser (12.47px, 16px min-inline, 4px inline padding, pill radius, tabular-nums) and a token-parity test fails if either side moves alone. `--toggle-count-gap` is ADDITIVE to the toggle's own flex gap and defaults to the quiet 0 (rule #44). COLOUR is deliberately NOT shared: Button's pill sits on a static variant surface and tints itself translucently, but Toggle's pill sits on a surface that INVERTS when pressed, where that treatment cannot clear WCAG 1.4.3 AA at the xs step (measured 3.82:1, and 4.39:1 even at the lowest usable alpha \u2014 the ceiling is the chip label's own 5.04:1 and any tint only lowers it). So Toggle uses OPAQUE role fills that make its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted (14.18:1 light / 12.44:1 dark), pressed --primary on --primary-foreground \u2014 the chip label's own pair, swapped (5.04:1 light / 7.05:1 dark), so the pill is exactly as legible as the label beside it. All five colour knobs are ROLE-MIRROR knobs: `initial` at :root with the role default at the CALL SITE, so a scoped `.dark`/`[data-tenant]` override of the role actually reaches the pill. `--toggle-pressed-border-color` defaults to the pressed fill itself (quiet, #44) and is the knob a service overrides when its pressed fill is a PALE tint that weakens the inversions. `--toggle-count-forced-outline-width` (1px) draws the pressed pill's outline under `forced-colors: active`, where every fill is flattened and neither inversion encodes anything \u2014 together with the chip border following the system Highlight, that keeps the pressed state off colour alone (WCAG 1.4.1)."},{name:"--toggle-soft-{background,color,hover-background} / --toggle-soft-count-{background,color}",category:"component",tier:"component",role:'Toggle `variant="soft"` \u2014 the chip\'s REST SURFACE (gh#734). It exists because neither shipped variant could draw one: `default` is a 1px TRANSPARENT border and `outline` a hairline on --background, so a filter chip was invisible until it was pressed, and a consumer building a tag panel reported its tags "look transparent" and fell back to a Button that paints no pressed state at all. The defaults are hsl(var(--secondary)) fill with hsl(var(--secondary-foreground)) text \u2014 byte-identical to `Badge variant="secondary"` and `.ui-button--secondary`, so a chip, a badge and a button on one row are one family and a service that re-themes --secondary moves all three at once. HOVER is the OPAQUE --secondary-hover, not Button\'s translucent `--secondary / 0.8`: a chip row sits on the page AND inside a Card, and a translucent hover takes its value from whichever surface is under it, so the same chip would read differently on each. The COUNT knobs are a separate pair because the generic resting pill cannot be inherited here: its default fill is --muted, and --muted and --secondary are the SAME value in the shipped theme (45 15% 95%), so that pill would measure 1.00:1 on a soft chip and vanish \u2014 the gh#602 failure on a different control. The soft pill takes hsl(var(--background)) instead, which is as quiet against the chip as the default pill is against its own (1.10:1) while carrying --foreground at full strength, and is opaque so the ratio does not move with hover. All five are ROLE-MIRROR knobs: `initial` at :root with the role default at the CALL SITE, so a scoped `.dark`/`[data-tenant]` override of the role reaches the chip. The PRESSED rules still out-specify every one of them, so the pressed state is unchanged.'},{name:"--logo-godx-{size,size-xs|sm|md|lg,color} / --logo-success-{background,foreground} / --logo-identity-foreground",category:"component",tier:"component",role:'The GoDX IDENTITY mark. COLOUR: its default is the --brand IDENTITY role (canonical emerald) \u2014 deliberately independent of --primary, so a re-themed action colour never recolours the brand, AND of --success, the \u82E5\u7AF9 STATUS green it must never default to (`tone="success"` names the semantic SLOT, not the status role). Role-mirror knobs: declared `initial` at :root with the role default at the CALL SITE (`hsl(var(--logo-godx-color, var(--brand)))`), so a scoped `.dark`/`[data-tenant]` override of --brand actually reaches the mark. BOX: `--logo-godx-size-{xs,sm,md,lg}` (1.5 / 1.75 / 2 / 2.5rem) is the identity mark\'s own size ramp \u2014 the `size` prop drives it exactly like --logo-size-* drives the boxed glyph, one tier above its glyph sibling because the artwork is a capsule inside a square viewBox. `--logo-godx-size` is the PIN, not the base: `initial` by default (so the tiers apply) and, set once by a service theme, it freezes the mark at that box on EVERY tier. INK: `--logo-identity-foreground` (48 9% 9%, #191815) is the colour the boxed `mark="glyph"` sets its TEXT in on the identity fill \u2014 deliberately NOT --brand-foreground. --brand-foreground is the artwork KNOCKOUT colour (it tracks --background in both themes, because `mark="godx"` punches its inner bar as an evenodd HOLE and the email mark paints that hole solid to match) and as negative space only owes WCAG 2.2 SC 1.4.11\'s 3:1. The boxed glyph renders real TEXT, so SC 1.4.3 applies at 4.5:1 \u2014 14px bold is NOT "large text" (that needs 18.66px bold / 24px) \u2014 and knockout white on the emerald measured only 3.67:1, a straight AA failure. The ink is theme-INVARIANT (it is the same near-black spine the dark theme already resolved to), so dark is unchanged at 6.89:1 and light rises to 4.74:1. It is NOT a role-mirror knob \u2014 its default is a real value, not a role, so there is no role to freeze and it is declared at :root, not `initial`. Re-theming --brand to a DARK fill? Override the public knob --logo-success-foreground to re-invert the ink. Applies to `<Logo mark="godx">` / `tone="success"`.'},{name:"--logo-wordmark-{gap,font-size-xs|sm|md|lg,font-weight,letter-spacing,font-family,color}",category:"component",tier:"component",role:'Wordmark/lockup knobs for `<Logo wordmark="\u2026" />` \u2014 the mark\u2194wordmark gap, the per-size-tier wordmark type ramp, and its face/weight/tracking/colour. The package ships NO wordmark artwork: `--logo-wordmark-font-family` defaults (at the call site) to --font-family-display, so the wordmark is typeset in the design-system face; pass an inline <svg> as `wordmark` when a real logotype exists. `--logo-wordmark-color` is a role-mirror knob (`initial`) whose call-site default is hsl(var(--foreground)), or the --brand IDENTITY role on the godx / tone="success" lockup \u2014 never --primary and never the --success status green. Setting it once in a service theme re-colours every lockup with no page CSS.'},{name:"--card-*",category:"component",tier:"component",role:"Card surface, border, spacing, and typography."},{name:"--control-*",category:"component",tier:"component",role:"Shared form control heights, padding, icons, and focus chrome."},{name:"--control-affix-{inset-inline-end,action-size,action-radius,icon-size,rest-alpha} / --control-trigger-space-inline-end",category:"component",tier:"component",role:"OVERLAY trailing affix \u2014 the clear \u2715 / chevron a select-family trigger parks ON TOP of its inline end. One set for Select, SearchSelect, Cascader and TreeSelect (`.ui-control-affix-action` / `-icon` / `-indicator`); the Dialog and Sheet close \u2715 borrow `--control-affix-icon-size` so every overlay \u2715 in the system is one size. Before #319 each of those hard-coded the same `end-2 size-6 rounded-sm opacity-50` stack, so retuning affix weight meant chasing the same literal through four components and missing one. `--control-affix-rest-alpha` (0.5) is the resting weight and is deliberately QUIETER than the inside-field set's 0.7 (`--control-inline-affix-rest-alpha`): an overlay affix floats over the selected value, so at equal weight the \u2715 starts reading as content. `--control-trigger-space-inline-end` (2.25rem, a raw rem because the `pe-9` it replaced is a flat Tailwind step, not a density-scaled one) is the inline room the trigger reserves so a long selected label never runs UNDER the affix \u2014 grow the affix without growing this and the label collides with it; shrink it without shrinking this and you ship dead space at every trigger's end."},{name:"--control-inline-affix-{size,icon-size,space-gap,inset-inline,rest-alpha,space-inline-end}",category:"component",tier:"component",role:"INSIDE-FIELD affix \u2014 the leading/trailing controls Input, Textarea, TimePicker and DatePicker render WITHIN the field box, as opposed to the overlay set (`--control-affix-*`) that a select-family trigger parks on top of. Kept a SEPARATE set on purpose, not an alias: these sit on the field's own surface rather than over it, so they rest heavier \u2014 `--control-inline-affix-rest-alpha` is 0.7 against the overlay's 0.5. Collapse the two into one knob and one side always loses: either the inline affixes go too faint to find, or the overlay \u2715 starts fighting the value it sits on. `--control-inline-affix-space-inline-end` (2.25rem) reserves room for exactly one affix. Pickers show clear when nonempty and clearable; otherwise they show their calendar/clock. Never render both. Textarea has no single line to centre on, so it pins its clear to the top-end corner via `--textarea-clear-inset-block-start` rather than centring like Input."},{name:"--textarea-autogrow-{line-height,min-height-rows,max-height-rows,box-inset} / --control-multiline-padding-block",category:"component",tier:"component",role:"Textarea `autoGrow` geometry \u2014 the box that grows with its content. The floor and ceiling are counted in TEXT ROWS (`--textarea-autogrow-min-height-rows` 1, `--textarea-autogrow-max-height-rows` 8), not pixels, because a row count survives a density change and a `--font-size-base` retheme while a px ceiling silently stops matching the visible line count. A service sets its composer's resting and maximum height once in theme; the `minRows` / `maxRows` props override per instance \u2014 the same theme-global / prop-local priority as `--form-label-width` vs `labelWidth`. `--textarea-autogrow-line-height` is `initial` at :root and read as `var(--textarea-autogrow-line-height, var(--line-height-normal))` at the call site, so a service that retunes the multiline line-height for CJK legibility retunes the row unit with it instead of getting a ceiling that no longer means eight visible lines. `--textarea-autogrow-box-inset` is the non-text part of the box the row maths adds back (block padding + border, both edges) and `--control-multiline-padding-block` is that block padding, shared with `.ui-control-multiline` itself so the two cannot drift. The floor is additionally clamped up to `--control-height`, so a resting one-row composer still lines up with the Input / Button on its row rather than undercutting the control tier. Every default reproduces today's geometry when `autoGrow` is absent."},{name:"--control-composite-field-*",category:"component",tier:"component",role:"The bordered two-input shell (`.ui-control-composite-field`) used by `DatePicker range` (at every `picker` granularity): one field box wrapping two inputs plus a separator so the pair reads as a SINGLE control instead of two adjacent ones. `--control-composite-field-space-gap` (`--space-2`) is the rhythm between the halves and the separator. Shared deliberately \u2014 before #319 each picker carried its own literal and the range fields drifted into slightly different boxes, the tell that a design system is not actually one system. The box's height, border, disabled state and focus chrome still come from `--control-*` / `.ui-control`, so retune this only for the internal gap; anything else belongs on the control family."},{name:"--menu-item-{height,radius,space-inline,space-gap,font-size,inset-space-inline-start} / --menu-content-{space-inset,min-width}",category:"component",tier:"component",role:"ONE row rhythm for every popup list surface: DropdownMenu AND Select's listbox lay their rows out against these (`.ui-select-item` sits in the same rule as `.ui-dropdown-menu-item`), so a service retunes menu density once instead of per surface. Before #319 the height was a literal `2rem` in the CSS and DropdownMenu had not been converted at all \u2014 it carried its whole box as Tailwind literals on the component. Set `--menu-item-height` and every menu surface resizes together; patch one component's padding instead and you get the menus-that-almost-match tell. `--menu-item-inset-space-inline-start` is the indicator column an inset row (a checkbox/radio row with no indicator of its own) reserves so its label stays aligned with its checked siblings \u2014 move it whenever you change `--menu-indicator-size`, or the two columns desynchronise. `--menu-content-min-width` (10rem) and `--menu-content-space-inset` are the panel, not the row; DropdownMenu re-points the min-width at `--dropdown-content-min-width` (8rem) because it anchors to a small trigger, so override that one to widen dropdowns alone."},{name:"--table-*",category:"component",tier:"component",role:"Table row/cell sizing."},{name:"--table-pagination-padding-{y,x}",category:"component",tier:"component",role:"DataTable.Pagination footer inset. The footer used to declare `padding-top` ONLY, so in the documented flush container (`<Card><CardContent flush><DataTable/>`) the 'rows per page' label and the page-size Select sat flush against the container edge and its closing border. It now owns `padding-block` + `padding-inline`. Both knobs are declared `initial` with the default at the CALL SITE \u2014 block `var(--space-stack-sm)` (the old padding-top value, now on both block edges), inline `var(--table-cell-space-x)` so the label lands on the same optical axis as the first column's text. `initial` is load-bearing: both defaults are density-scaled and re-declared inside a `.ui-density-*` subtree, and a `:root` binding would freeze the footer at the `:root` density. Consumers no longer need a local `.ui-data-table-pagination` override; a service on another grid retunes either axis."},{name:"--table-surface-min-inline-size",category:"component",tier:"component",role:'DataTable surface narrow-viewport width FLOOR. Below the `sm` viewport step a multi-column admin grid whose cells are `white-space: nowrap` would be crushed, so the bordered surface keeps a minimum inline size and `.ui-data-table-scroll` scrolls instead. This shipped as a hard-coded `min-w-[640px] sm:min-w-0` utility pair ON the surface element \u2014 the literal that forced the horizontal scroll at 390 \u2014 leaving a service that wants a narrower (or no) floor with no route but forking the component (rule #45). Default `640px`, byte-identical to the old utility, and deliberately px so the floor releases at exactly the same width as the px-based `sm` media query that clears it (a rem value drifts under a non-16px root and re-introduces the scroll between the two thresholds). Set `0` to opt out; `DataTable preset="action-collection"` already does, because there the column-priority measures own the width.'},{name:"--form-label-width",category:"component",tier:"component",role:"Label column width in horizontal Form layout. Default max-content; a service theme sets it once (e.g. 110px) \u2014 the labelWidth prop overrides per form/field."},{name:"--form-label-gap",category:"component",tier:"component",role:"Label\u2194control column gap in horizontal Form layout. Default 16px (--space-4)."},{name:"--dialog-* / --alert-* / --skeleton-*",category:"component",tier:"component",role:"Feedback component sizing and spacing."},{name:"--banner-{radius,border-width,space-inset-block,space-inset-inline}",category:"component",tier:"component",role:'Banner strip geometry \u2014 the full-bleed presentation of the Alert primitive (`<Banner>` / Alert variant="banner"). radius 0 (square strip corners), a single hairline block-end rule (tone-coloured by the alert rules), block inset denser than the inline card (--space-3), inline inset defaulting to the page gutter (--space-page-active-x) so banner text aligns with page content. Colour stays entirely with `tone`; a service retunes the strip once here \u2014 a consumer never writes CSS to place a banner.'},{name:"--page-header-status-gap",category:"semantic",tier:"semantic",role:"Gap between the page title and its status/meta band (PageContainer `status`), and between the band's own items. Default --space-inline-sm. The band shares the title line and wraps under it on compact viewports; a page that never passes `status` reads neither the token nor the wrapping row."},{name:"--sheet-responsive-breakpoint-width / --sheet-bottom-max-height",category:"component",tier:"component",role:`The responsive drawer / detail-panel contract (SheetContent responsive="auto"). --sheet-responsive-breakpoint-width (default 48rem = 768px, the library's canonical mobile line) is the viewport width at and below which the desktop side panel becomes a mobile bottom sheet; --sheet-bottom-max-height (default 85dvh) caps THAT bottom presentation only (a plain side="bottom" sheet stays content-sized). Because a CSS @media cannot resolve a custom property, the breakpoint is read off :root at runtime by the exported useSheetResponsiveMode() hook \u2014 which is also what OrgSwitcher responsive="auto" uses, so ONE knob moves the popover\u2192sheet and side\u2192bottom line for every overlay at once. Accepts px/rem/em.`},{name:"--carousel-arrow-{size,icon-size,inset-block-start}",category:"component",tier:"component",role:"The Carousel prev/next arrows, as THREE separate decisions. `--carousel-arrow-size` is the BUTTON box and therefore the touch target (default 2rem/32px, above WCAG 2.2 SC 2.5.8's 24px floor) \u2014 a brand whose own standard is 44px sets `2.75rem` here and nothing else moves. `--carousel-arrow-icon-size` is the mark inside it, on the icon scale (1rem). `--carousel-arrow-inset-block-start` overrides the vertical placement, whose default is the middle of the SLIDES rather than of the component (the dots row is subtracted back out). The box token is gh#931: it used to be two bare literals, which made the target the one dimension a theme could not reach. The arrows are absolutely positioned over the rail edges by design; there is no prop that moves them into a caption row."},{name:"--scroll-area-anchor-offset",category:"component",tier:"component",role:'ScrollArea `anchor="bottom"` stickiness band: how close to the bottom edge the reader still counts as "following the stream". Inside it, arriving content keeps the viewport pinned to the newest item; one pixel beyond it the reader is reading history and anchoring never moves them again until they come back (WCAG 3.2.5). Sized to the row height a service renders \u2014 a dense audit line is ~20px, a chat bubble with an avatar ~64px, and "one row from the bottom" is what the reader means. In rem so the band is still one row at 200% zoom. A CSS comparison cannot express it, so the component reads the token off the element at mount (px/rem/em accepted); the `anchorOffset` prop overrides it per instance. The rail geometry knobs (--scroll-area-bar-size / -bar-padding / --scroll-area-thumb-radius) live with the data-display tier.'},{name:"--qr-code-*",category:"component",tier:"component",role:"QrCode scanner-safe foreground/background and xs/sm/md/lg natural-size tiers. Keep foreground/background at strong contrast; the defaults remain dark-on-light in dark application themes."},{name:"--chart-trend-plot-height{,-xs,-sm,-md,-lg}",category:"component",tier:"component",role:"CompactBarTrend plot-height tiers (xs 3.5rem = dashboard summary-card density, sm 5rem, md 7.5rem, lg 10rem). The `size` prop picks a step via data-size; a service retunes the whole scale here. This is why a consumer NEVER writes an inline height for a compact trend."},{name:"--chart-trend-bar-{gap,radius,max-width,min-height}",category:"component",tier:"component",role:"CompactBarTrend mark geometry: gap between bars (default --space-2), rounded data-end radius (--radius-sm), the per-mark width ceiling (1.5rem, so a 3-point trend does not render slabs) and the min height floor (2px, so a zero value still reads as a plotted category). All service-tunable (rule #45)."},{name:"--chart-trend-bar-background{,-alpha} / --chart-trend-bar-emphasis-background",category:"component",tier:"component",role:"CompactBarTrend fills \u2014 role-mirror knobs declared `initial` with the role default at the call site. Muted marks default to hsl(var(--muted-foreground) / --chart-trend-bar-background-alpha) (0.75, which clears the 3:1 non-text contrast floor); the emphasized 'current' mark defaults to hsl(var(--primary)). Point them at --chart-N to tint a trend to a series colour."},{name:"--chart-trend-baseline-border",category:"component",tier:"component",role:"CompactBarTrend baseline rule. QUIET by default (rule #44 \u2014 resolves to `none`); a service opts in with `--chart-trend-baseline-border: 1px solid hsl(var(--border));`."},{name:"--chart-trend-{tick-gap,tick-font-size,footer-gap}",category:"component",tier:"component",role:"CompactBarTrend category-tick and activity-footer rhythm \u2014 the plot\u2194tick gap, tick type size (--font-size-xs) and the plot\u2194footer gap."},{name:"--email-shell-{width,padding,page-padding,border-width} / --email-card-{radius,reference-height} / --email-stack-gap{,-sm}",category:"component",tier:"component",role:"Transactional-email shell geometry: the 480px card width, its 32px inset, the 24px viewport gutter, the 1px edge, the 10px radius (mirrors --card-radius) and the block rhythm. The canonical invitation reference measures 480\xD7407 (--email-card-reference-height is a visual-regression target, NEVER a fixed height on the card). Values are LITERAL px \u2014 email clients resolve neither var() nor rem \u2014 and are consumed through the `@godxjp/ui/email` export (EMAIL_SHELL), never by a stylesheet."},{name:"--email-{body,heading}-{font-size,line-height,font-weight} / --email-font-family-{sans,mono}",category:"component",tier:"component",role:`Email type ramp, reconciled with the SCR-302 canonical reference. Body 14px/1.9, title 17px/1.7 at weight 500 (a transactional title is CALM, not bold) \u2014 deliberately looser and quieter than the web ramp, because a mail client gives the reader no density control, so do NOT 'fix' it back to --heading-h1/--line-height-body. --email-font-family-sans names the canonical Noto Sans JP face first and degrades Hiragino \u2192 Yu Gothic \u2192 M PLUS 2 \u2192 Meiryo \u2192 system UI \u2192 Arial \u2192 sans-serif; no email client honours @font-face, so the stack is the whole fallback contract. --email-font-family-mono (mirrors --font-family-mono) sets invoice ids, masked card numbers, ISO dates and amounts. Family names export SINGLE-quoted so the value drops into a double-quoted style="\u2026" attribute unescaped (emailInlineStyle throws on a double quote). Exposed as EMAIL_TYPOGRAPHY.`},{name:"--email-mark-{width,height,gap} / --email-wordmark-{font-size,font-weight}",category:"component",tier:"component",role:'Email brand-mark LOCKUP. The ARTWORK is byte-identical to <Logo mark="godx" /> (the 32\xD732 capsule + internal glyph, asserted by test); only the rendered box is email-specific \u2014 the canonical header sets a 22px mark, an 8px gap (mirrors --logo-wordmark-gap) and a 13px/700 wordmark (mirrors --logo-wordmark-font-weight). In that pairing the mark is DECORATIVE (render it with label: "") and the wordmark carries the accessible name, so the brand is announced once. Exposed as EMAIL_BRAND_MARK; the svg / dataUri / tableHtml deliveries all derive from this one geometry source.'},{name:"--email-cta-{height,line-height,padding-x,radius,font-size,font-weight} / --email-focus-border-width",category:"component",tier:"component",role:"The single primary email CTA, reconciled with the SCR-302 canonical reference: 44px tall with line-height EQUAL to the height so the label centres without flexbox in Outlook, 16px inline padding (--space-4), the 6px --radius base, 14px/500 label. The height is a TOUCH TARGET and is deliberately DECOUPLED from --control-height-lg (36px), which it mirrored until 18.8.0 \u2014 do not restore the mirror. Email is touch-only: no hover, no precise pointer, no dependable zoom, so the web AA floor (SC 2.5.8, 24\xD724, which 36px clears) is the wrong bar. 44px is SC 2.5.5 Target Size (Enhanced, AAA, 44\xD744) plus the Apple HIG 44pt / Material 48dp convention, and the mobile reflow still takes the CTA full-bleed. Fill/label are EMAIL_COLORS.primary / primaryForeground, derived from the --primary role \u2014 never paste a canonical hex, or the email stops tracking a re-theme. --email-focus-border-width mirrors --focus-ring-width for the webmail panes that honour :focus-visible. Exposed as EMAIL_CTA / EMAIL_FOCUS."},{name:"--email-footer-{font-size,line-height,link-gap,padding-top,border-width} / --email-mobile-*",category:"component",tier:"component",role:"Legal-footer typography (11px/1.8 quiet type per the SCR-302 canonical, 12px between adjacent links, 20px above the hairline) and the narrow-viewport reflow (520px breakpoint, fluid card, 20px inset, 12px gutter, 16px heading \u2014 one step under the 17px desktop title, full-bleed CTA). The canonical 390px reference raster is unusable (435px wide and already clipping the card, dxs-platform/platform#496), so the mobile ramp is the library's documented contract rather than a measured value. Exposed as EMAIL_FOOTER / EMAIL_MOBILE; every reflow rule needs an inline fallback because most clients strip <style>."},{name:"--auth-shell-device-{card-max-width,main-padding,main-padding-mobile,otp-slot-inline-size,otp-slot-block-size}",category:"component",tier:"component",role:'AuthShell `preset="device-authorization"` measure \u2014 the canonical OAuth device-grant artboard: a 23.75rem/380px card at 1440/1024 and a 15px-block \xB7 5px-inline page gutter at 390 (so the card renders x=5px, width=380px), PLUS the code field the flow is actually about. The preset now owns its OTP slot box and hands it to --otp-slot-{inline,block}-size: 27.5x52 per slot, i.e. a 4-slot `appearance="grouped"` box of 112x54 with its 1px group border. Without it the field fell back to the square --control-height tier and rendered 146x38 against that artboard \u2014 the preset owned the page but not its subject. LITERAL lengths, not --space-*, because the artboard specifies exact device pixels that must not drift with --scaling. Selecting the preset replaces a consumer-side --auth-shell-card-max-width override or a forked `.auth-shell--wide` class; the canonical 360px/15px default is untouched.'},{name:"--auth-shell-context-{card-max-width,main-padding,main-padding-mobile,card-stack-gap}",category:"component",tier:"component",role:'AuthShell `preset="context-selection"` measure \u2014 the organisation/context picker: a 25rem card on desktop/tablet, edge-to-edge on mobile (0 inline gutter), and a 1rem rhythm between the three direct sections of the auth column (intro \xB7 choice card \xB7 "remember" row).'},{name:"--auth-shell-recovery-{card-max-width,main-padding,main-padding-mobile}",category:"component",tier:"component",role:'AuthShell `preset="account-recovery"` measure \u2014 the SCR-008 27rem/432px panel, shared by the password-recovery panel (request \xB7 sent \xB7 new-password \xB7 expired) AND the sign-in MFA challenge panel (OTP \xB7 recovery-code \xB7 passkey-failure), because both canonical desktop panels measure w=432 at 1440. Mobile gutter = 15px inline at <=30rem, so the panel is x=15, width=360 \u2014 the SAME rhythm as the canonical Login flow, chosen deliberately: the supplied 390 reference is a desktop 2x2 composite that crops horizontally and is NOT a valid source. The canonical 360px Login measure and the 24rem un-preset shell are untouched.'},{name:"--auth-shell-registration-{card-max-width,main-padding-block-start,main-padding-block-start-mobile,main-padding-inline,main-padding-inline-mobile,main-padding-block-end,main-padding-block-end-mobile,card-stack-gap,identity-slot-block-size}",category:"component",tier:"component",role:'AuthShell `preset="registration"` measure \u2014 the canonical SCR-002 sign-up flow: a 22.5rem/360px form measure with a 15px inline gutter at 390 (card x=15, width=360 \u2014 the same page rhythm as the Login flow, so sign-in \u2192 sign-up never jumps on a phone). START-aligned (a tall sign-up card must scroll, not clip its own top above the scroll origin), with the block-start offset DERIVED from the canonical artboard (card y=284 at 1440x900, y=274 at 390x844: padding-block-start + 112px identity slot + 20px stack gap), and a footer-clearance knob of its own (block-end 3rem / 2rem mobile) so the legal/consent footer never sits flush against the submit button after a long scroll. The fixed 112px identity track absorbs absent / one-line / wrapped two-line identity copy without moving the card anchor.'},{name:"--otp-slot-size",category:"component",tier:"component",role:"InputOTP slot box. Default `var(--control-height)` \u2014 byte-identical to before and still density-aware \u2014 but its OWN knob, so an auth panel can widen the 6-slot challenge row to fill a wide surface WITHOUT re-scoping --control-height (which would resize the primary button and every other input in the same card). Set it to a NAMED tier (`var(--control-height-lg)`), never an ad-hoc calc offset."},{name:"--otp-slot-{inline-size,block-size}",category:"component",tier:"component",role:'Per-AXIS InputOTP slot box. --otp-slot-size stays the SQUARE shorthand; these two win over it and fall back to it, so a code field that is taller than it is wide \u2014 the canonical device-grant slot, 27.5x52 \u2014 is finally expressible from a token. Declared `initial` so the whole chain (axis \u2192 square \u2192 --control-height) resolves at the CALL SITE and a shell that re-scopes --control-height still reaches a field that sets neither axis. `AuthShell preset="device-authorization"` sets both for you.'},{name:"--otp-container-align",category:"component",tier:"component",role:'Main-axis alignment of the whole InputOTP row. Default `flex-start` = the historical layout, so nothing moves. It exists because a centred code challenge is the common auth case and the container element belongs to `input-otp` \u2014 the only thing a consumer could reach was a wrapper div, and every one of them wrote it. Per instance use `align="center"` on InputOTP, which outranks this token.'},{name:"--tabs-indicator-{background,size,offset}",category:"component",tier:"component",role:"Tabs `line` ACTIVE indicator \u2014 the only selected-state decoration the line variant paints; it never gets a surrounding ring/card border, so the `:focus-visible` keyboard ring stays visible and distinct (WCAG 2.4.7). --tabs-indicator-background is declared `initial` so its hsl(var(--primary)) default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme. Defaults = primary \xB7 2px \xB7 offset 0 (flush with the trigger edge); raise the offset to park the bar on a thicker strip hairline. The selected ring on the default/card variants is unchanged."},{name:"--avatar-square-{radius,size,background,foreground}",category:"component",tier:"component",role:'Avatar `shape="square"` entity-header mark \u2014 the compact rounded square an organization/service header uses instead of the round person avatar. --avatar-square-background / --avatar-square-foreground are declared `initial` so the hsl(var(--primary)) / hsl(var(--primary-foreground)) defaults re-resolve at the CALL SITE under a scoped theme. Defaults = --radius-lg corners \xB7 --control-height box (swapping shape never reflows the header) \xB7 primary fill at 4.65:1 contrast. `shape="circle"` (the default) is inert and reads --avatar-background / --avatar-tint as before.'},{name:"--avatar-tinted-{background,foreground,glyph-size}",category:"component",tier:"component",role:'Avatar `appearance="tinted"` \u2014 the CAPABILITY MEDALLION: the tinted plate a feature/capability glyph sits on, as opposed to the solid entity mark above. Orthogonal to `shape`, so `shape="square" appearance="tinted"` is the canonical rounded square. --avatar-tinted-background / --avatar-tinted-foreground are declared `initial` so the hsl(var(--primary) / 0.1) / hsl(var(--primary)) defaults re-resolve at the CALL SITE under a scoped [data-tenant]/.dark theme \u2014 which is the whole point: consumers were writing that 0.1 alpha literal into page CSS, or giving up and rendering a bare glyph, because the medallion is a composition (Avatar + a Lucide glyph) whose tint had no token. Defaults = 10% primary wash \xB7 primary glyph \xB7 --control-icon-size glyph box.'},{name:"--avatar-presence-{size,min-size,inset,ring-width,ring-color,stroke-width,bar-inline-size,bar-block-size,online-color,away-color,busy-color,offline-color}",category:"component",tier:"component",role:'Avatar `presence` \u2014 the realtime reachability dot on the mark. Every constant is a knob because the workaround it replaces baked four of them plus a raw palette colour into consumer page CSS (`-end-0.5 -bottom-0.5 size-2.5 ring-2 bg-green-500`). --avatar-presence-size is a PROPORTION of the mark (default 30%, floored by --avatar-presence-min-size = --space-2), NOT a px step, so one value tracks every avatar the system paints \u2014 the --control-height box and its xs/sm/lg steps, --avatar-square-size, --org-switcher-avatar-size, --upload-avatar-size, a call site\'s own `size-12`, the 36px ListRow density="compact" mark \u2014 instead of freezing a diameter that is a boulder on a 24px mark and a speck on a 96px one. --avatar-presence-ring-color and the four state colours are ROLE-MIRROR knobs declared `initial`, with the role default at the CALL SITE (`var(--knob, var(--role))`), so a scoped [data-tenant]/.dark override of --background / --success / --warning / --destructive / --muted-foreground reaches them \u2014 bound at :root the ring would freeze light-mode-white on a dark avatar. --avatar-presence-stroke-width and --avatar-presence-bar-* are part of the ACCESSIBLE encoding, not decoration: they draw the per-state silhouette (filled / half-filled / barred / hollow) that keeps presence off colour-alone (WCAG 1.4.1) in greyscale, for a deuteranope and under forced colors. Defaults = 30% diameter (floor 0.5rem) \xB7 flush with the corner (inset 0) \xB7 a 2px --background separator ring \xB7 a 1.5px state stroke \xB7 a 56%-wide 1.5px dnd bar.'},{name:"--separator-{rule-size,rule-color,label-gap,label-inset,label-font-size,label-line-height,label-font-weight,label-color,tone-<tone>-rule-color,tone-<tone>-label-color}",category:"component",tier:"component",role:"Separator, including the LABELLED rule a `label` interrupts \u2014 a message stream's day divider, a \"new messages\" unread watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, which baked `height: 1px` into shell-layout.css and read the `--auth-shell-divider-*` micro-scale, so a service retuning its login divider silently retuned every day divider in its chat. Defaults are the QUIETEST state: a 1px hairline, a muted --font-size-xs label at --font-weight-medium, no surrounding padding. --separator-label-gap and --separator-label-inset (the SHORT rule half under labelAlign start/end \u2014 a grid track on the inline axis, so it flips under RTL) are declared `initial` because --space-* is density-scaled and re-declared inside a `.ui-density-*` subtree; a :root binding would freeze them at the :root density. Every colour knob is a role-mirror and is likewise `initial`, with the role default at the CALL SITE \u2014 --separator-rule-color \u2192 --border, --separator-label-color \u2192 --muted-foreground, and --separator-tone-{muted,primary,success,warning,destructive,info}-{rule,label}-color \u2192 the matching semantic role. `tone` re-points the rule AND the label, never the rule alone, so an attention rule is not colour-only (WCAG 1.4.1) and survives forced-colors. AuthDivider now only re-points these knobs at the --auth-shell-divider-* layer, so #263's canonical login geometry is unchanged."},{name:"--steps-inline-{gap,item-gap,font-size,separator-size,index-font-weight,index-color,separator-color}",category:"component",tier:"component",role:"Steps type=inline compact auth/device progress rhythm, typography and EMPHASIS. Consumers select the semantic appearance; services retune the row once without page CSS. The step number's emphasis is two knobs \u2014 --steps-inline-index-font-weight (default bold) and --steps-inline-index-color (role-mirror `initial`, default the inherited step colour) \u2014 because the canonical hosted-identity row marks the step with an accent TINT at normal weight while the library default marks it with bold. --steps-inline-separator-color (role-mirror `initial`, default --muted-foreground) tints the glyph the `separator` prop picks."},{name:"--auth-account-summary-{min-height,gap,padding,identity-min-width,avatar-size,avatar-glyph-size,email-font-size}",category:"component",tier:"component",role:"AuthAccountSummary compact signed-in identity row: wrapping threshold, avatar, email and action rhythm. The default touch-safe row is package-owned and remains themeable without consumer selectors."},{name:"--auth-shell-{main-align,card-stack-gap}",category:"component",tier:"component",role:"AuthShell column knobs shared by every preset. --auth-shell-main-align is the block alignment of the auth column (default `center`, the vertically-centred card; set `start` for a tall intro+card+footnote stack). --auth-shell-card-stack-gap is the gap between the card slot's direct sections \u2014 default `0px` (quiet, rule #44) so an existing single-card consumer is byte-for-byte unchanged; a preset opts in."},{name:"--card-{accent-rail-width,accent-perimeter-width,accent-perimeter-ring-width,featured-border-color,featured-ring-width}",category:"component",tier:"component",role:'Card ACCENT geometry, one set per placement. `accentPlacement="edge"` (the default) draws the leading rail at --card-accent-rail-width (6px). `accentPlacement="perimeter"` draws the FULL attention border, measured by --card-accent-perimeter-width + --card-accent-perimeter-ring-width (1px + 1px, the optical weight of `variant="featured"`) in the card\'s own semantic accent tone. `variant="featured"` is the brand-toned member of the same family and no longer hard-codes --primary: its edge is the --card-featured-border-color role-mirror knob (`initial`, so the --primary default resolves at the CALL SITE and a scoped [data-tenant]/.dark override reaches it) at --card-featured-ring-width. The accent COLOUR itself is not a knob \u2014 it is resolved from `data-accent` on the card, so retint the ROLE (--attention, --success \u2026).'},{name:"--card-space-shell-y",category:"component",tier:"component",role:"Card BLOCK-axis shell padding \u2014 a plain header's top, a `solo` body's top and the terminal slot's bottom. Split off --card-space-inset, which is now inline-only, so a theme can make a card SHORTER without narrowing its column. Declared `initial`: the default resolves at the CALL SITE to --card-space-inset, so a card that overrides neither (and `density=\"tight|cozy\"`, which re-declares it `initial` to re-arm the per-instance inset) renders exactly as before."},{name:"--auth-shell-{compact-card-inset,card-padding-block-compact,card-body-gap-compact,card-gap-compact}",category:"component",tier:"component",role:"The compact AuthShell card's four independent knobs \u2014 one per axis, so the canonical Login card is tunable WITHOUT a consumer selector on the card-content slot: `compact-card-inset` = the inline column (\u2192 --card-space-inset); `card-padding-block-compact` = the card's block/top-bottom padding (\u2192 --card-space-shell-y, `initial` so its default mirrors the live inline inset and canonical output is unchanged); `card-body-gap-compact` = the header\u2194body gap (\u2192 --card-space-body-y, 12px, the role the block knob used to be mis-wired to); `card-gap-compact` = the in-slot title\u2195description stack gap (\u2192 --card-space-gap)."},{name:"--app-setting-picker-compact-{control-height,padding-x,gap,font-size}",category:"component",tier:"component",role:'AppSettingPicker `compact` trigger \u2014 the small, content-hugging LABELLED switcher for an auth/legal footer (`kind="locale" appearance="labeled" compact`). The box height reads the official --control-height-sm tier (never a literal or an ad-hoc calc), and padding/gap/type are separate knobs so a service theme retunes the footer switcher without forking CSS.'},{name:"--centered-shell-column-offset-block",category:"component",tier:"component",role:'CenteredShell column block offset \u2014 default `0` (the quiet state, rule #44: the top-aligned flowing/scrolling page). `<CenteredShell align="center">` flips it to `auto`, which centres the column in the 100dvh shell: the package-owned geometry for a SYSTEM-level standalone surface (a 500/503 error page, a maintenance notice) at 1440/1024/390, so a consumer never writes `min-h-dvh` + flex-centring CSS or a className. Auto block offsets collapse to 0 when the content is taller than the viewport, so a long localized message scrolls from the top instead of clipping.'},{name:"--error-surface-*",category:"component",tier:"component",role:'ErrorSurface knobs \u2014 the whole 403/404/500/503 exception surface is themeable without a single consumer class or media query, in BOTH `mode="application"` and `mode="system"`. Geometry: `--error-surface-max-width` (32rem measure of the surface block, so a long JA/VI headline wraps readably even inside a wide PageContainer), `--error-surface-gap` (rhythm between status code \xB7 body \xB7 metadata \xB7 progress), `--error-surface-padding-block` (--space-10, the 1440/1024 steps) and `--error-surface-padding-block-compact` (--space-6, below the narrow step, i.e. the 390 case), `--error-surface-brand-gap` (system-mode Logo slot) and `--error-surface-progress-max-width` (18rem, so the maintenance meter reads as metadata, not as the page\'s primary content). Metadata list: `--error-surface-meta-gap` (row rhythm) \xB7 `--error-surface-meta-row-gap` (label\u2194value gap inside one row) \xB7 `--error-surface-meta-padding-block`. Chrome is QUIET by default (rule #44): `--error-surface-meta-border` is `none`; a service opts in with `1px solid hsl(var(--border))`. The narrow step is a CONTAINER query at 30rem on the SURFACE\'s own width, not a viewport media query, so it compacts correctly whether the squeeze came from a 390px phone or from an application shell with an expanded sidebar; below it, metadata rows stack label-over-value. System-mode viewport centring is delegated to `--centered-shell-column-offset-block` (via CenteredShell align="center"), and the description measure to `--empty-state-description-max-width`.'},{name:"--centered-shell-landing-*",category:"component",tier:"component",role:'CenteredShell public-landing knobs \u2014 the SHELL geometry of a public marketing/product landing, so the landing itself stays a COMPOSITION (Hero/Navbar/Footer fail the Framework-Component Test) with ZERO page-local CSS. Read only under `preset="public-landing"`; the default shell emits no `data-preset`, so none of them can match. Measure: `--centered-shell-landing-max-width` (67.5rem, shared by the header bar, the centred column AND the footer \u2014 the bar/footer inline padding is `max(gutter, (100% - measure) / 2)`, so header content starts on exactly the column edge and no consumer max-width wrapper exists), `--centered-shell-landing-inset-inline` (+ `-compact`, the 390 gutter), `--centered-shell-landing-main-padding-block` (+ `-compact`), `--centered-shell-landing-section-gap` (+ `-compact`, the rhythm BETWEEN plain `<section>` elements \u2014 the consumer never sets a gap) and `--centered-shell-landing-footer-padding-block`. Chrome is QUIET by default (rule #44): `--centered-shell-landing-card-shadow` is `none`, which flattens every Card in the subtree from ONE knob instead of a consumer `.landing .card { box-shadow: none }`. Type: `--centered-shell-landing-heading-size` (+ `-compact`) re-points `--heading-h1`, so a hero title is a real `Heading level={1}` and never a page font-size. `--centered-shell-landing-background` is a ROLE-MIRROR declared `initial` with the role default at the call site (`var(--centered-shell-landing-background, var(--background))`), so a scoped [data-tenant]/.dark override of `--background` still reaches the landing canvas. The compact step is a 40rem media query owned by the package; region visibility (anchor nav below the tablet step, wordmark and the secondary action at mobile) is `Flex hideBelow` / `hideFrom`, never a consumer @media.'},{name:"--table-action-collection-*",category:"component",tier:"component",role:'Table action-collection knobs \u2014 the canonical dense approval/action queue at 1440 \xB7 1024 \xB7 390. Read only under `preset="action-collection"`. Column PRIORITY measures replace the desktop intrinsic widths (a `white-space: nowrap` free-text column is what makes a five-column queue wider than its card and forces the horizontal scroll): `--table-action-collection-primary-width` (18%), `-secondary-width` (22%), `-meta-width` (12%) and `-actions-width` (3.5rem \u2014 an absolute measure because the row-action affordance must never be squeezed below its touch target); an unmarked column takes the remaining space. Below the collapse step the same four re-point to their `-compact` tier (24% / 22% / 20% / 2.75rem) together with `--table-action-collection-font-size-compact`, `-row-height-compact`, `-cell-space-x-compact` and `-cell-padding-y-compact`. The step is a CONTAINER query on the table\'s own width (sm 40rem \xB7 md 48rem \xB7 lg 64rem \xB7 xl 80rem via `collapseBelow`), not a viewport media query, so a table inside a master rail collapses before the page does. Percentages so the ratio holds at any card width; a service retunes the ratio once instead of authoring column widths per screen (rule #45). ONE family serves BOTH entry points \u2014 the `Table` primitive (`priority` on `TableHead`/`TableCell`) and the TanStack `DataTable` (`priority` on the `ColumnDef`, stamped onto both cells for you). There is deliberately no parallel `--data-table-action-collection-*` family: retune these once and every queue follows.'},{name:"--legal-document-*",category:"component",tier:"component",role:"LegalDocumentShell knobs \u2014 the whole legal/policy document surface is themeable without a single consumer `.legal-*` class. Geometry: `--legal-document-measure-max-width` (46rem readable measure, caps header/body/footer), `--legal-document-toc-width` \xB7 `--legal-document-column-gap` \xB7 `--legal-document-toc-inset-block-start` (sticky offset) \xB7 `--legal-document-toc-max-height`, `--legal-document-section-gap` \xB7 `--legal-document-section-title-gap` \xB7 `--legal-document-header-gap` \xB7 `--legal-document-meta-gap` \xB7 `--legal-document-nav-gap` \xB7 `--legal-document-footer-gap`, `--legal-document-meta-font-size`, `--legal-document-body-line-height` (1.8 long-form leading) and `--legal-document-scroll-offset` (the `scroll-margin-block-start` a hash jump leaves above a heading \u2014 this is why no app needs JS offset arithmetic). Contents entries: `--legal-document-toc-font-size` \xB7 `--legal-document-toc-title-font-size` \xB7 `--legal-document-toc-item-padding` \xB7 `--legal-document-toc-item-radius` \xB7 `--legal-document-toc-marker-width`. Chrome is QUIET by default (rule #44): `--legal-document-toc-border` / `--legal-document-header-border` / `--legal-document-footer-border` are all `none`; a service opts in with `1px solid hsl(var(--border))`. The six colour knobs are ROLE-MIRRORS declared `initial` with the role default at the call site \u2014 `--legal-document-toc-foreground` (\u2192 --muted-foreground, also paints the contents caption), `--legal-document-toc-active-foreground` (\u2192 --foreground), `--legal-document-toc-active-background` (\u2192 --accent), `--legal-document-toc-marker-color` (\u2192 --primary), `--legal-document-meta-foreground` (\u2192 --muted-foreground) and `--legal-document-summary-foreground` (\u2192 --muted-foreground) \u2014 so a scoped [data-tenant]/.dark override of the role still reaches them. The one-column \u21C4 two-column split is a CONTAINER query at 56rem on the shell's own width, not a viewport media query."},{name:"--empty-state-description-max-width",category:"component",tier:"component",role:"EmptyState description MEASURE \u2014 default 28rem (~65 Latin characters per line). A service or locale that needs a shorter/longer measure for its own copy (JA/VI error-page descriptions, a narrow system surface) retunes this one knob instead of forking `.ui-empty-state-description` (rule #45)."},{name:"--sidebar-badge-{background,foreground} / --sidebar-badge-destructive-{background,foreground}",category:"component",tier:"component",role:'Sidebar nav COUNT PILL colour, split into a resting pair and an emphasis pair. Before these knobs `.sb-badge` had a font-size token and no colour token at all, so a rail that had to tell "unread" from "mentions you" could only nest a `<Badge>` INSIDE `SidebarItemProp.badge` \u2014 which renders a pill inside a pill (measured: a 37.11x19.14 `.sb-badge` wrapping a 25.11x19.14 `<Badge>` with its own border). The resting pair is what every badge has always looked like (hsl(var(--secondary)) fill, hsl(var(--muted-foreground)) text); the `-destructive-` pair is read ONLY by rows that pass `badgeTone="destructive"`, which is the only thing that emits `data-tone` on the pill (rule #44), so a rail that never sets the prop renders exactly the node it always did. All four are role-mirror knobs declared `initial` with the role default resolved at the call site, so a scoped [data-tenant]/.dark override reaches them. Colour ONLY \u2014 the pill\'s min-width, radius, inline pad and font size are shared by both tones, which is what keeps a mention row and an unread row aligned in the same column.'},{name:"--sidebar-nav-item-{foreground,hover-foreground,disabled-foreground} / --sidebar-nav-icon-{foreground,hover-foreground,active-foreground,disabled-foreground}",category:"component",tier:"component",role:"Sidebar navigation row + icon COLOUR, split so they can differ. Previously `.sb-nav-item` set one `color` for the whole row, so the Lucide SVG inherited `--muted-foreground` along with the label and the icons read as 'missing' against a canonical shell that wants darker 16px icons. `--sidebar-nav-item-*` drives the row/label (incl. sub rows), `--sidebar-nav-icon-*` drives `.sb-icon`. All are role-mirror knobs declared `initial` at `:root` with the role default at the call site, so a scoped `[data-tenant]`/`.dark` override reaches them; icon defaults resolve to `currentColor`, i.e. rendering is unchanged until a service opts in (`--sidebar-nav-icon-foreground: hsl(var(--foreground))` is the canonical darker-icon setting). Colour ONLY \u2014 the 16px icon, 32px row height and 10px gap are untouched. The ACTIVE row is its own group, `--sidebar-item-active-*`. Note the interaction with that group since gh#651: the active row's label is now `hsl(var(--primary))`, and `--sidebar-nav-icon-active-foreground` still falls back to `--sidebar-nav-icon-foreground` and only then to `currentColor` \u2014 so an untouched sidebar gets a primary active ICON for free (it inherits the row), while a service that set the base icon knob keeps ITS colour on the active row and must set `--sidebar-nav-icon-active-foreground: hsl(var(--primary))` if it wants the icon to follow the label."},{name:"--sidebar-item-active-{background,foreground,tint,background-alpha}",category:"component",tier:"component",role:'Sidebar OPEN-ROW colour, one language for both nav depths (gh#651). Before this, the two levels of one nav column signalled the same meaning two ways: `.sb-nav-item[data-active="true"]` painted a neutral `hsl(var(--accent))` fill with an `hsl(var(--foreground))` label, while `.sb-nav-item--sub[data-active="true"]` painted `hsl(var(--primary))` \u2014 the open CHILD looked branded and its open PARENT looked grey. Defaults now: `--sidebar-item-active-background` = `--primary` composited at `--sidebar-item-active-background-alpha` (12%) over whatever the nav sits on, `--sidebar-item-active-foreground` = `hsl(var(--primary))` at BOTH depths, `--sidebar-item-active-tint` = `hsl(var(--primary))` for the level-2 dot. A DEFAULT change, not a hardcode \u2014 every knob still overrides, and a service that wants the grey back writes one declaration. RENAMED: the level-2 label knob was `--sidebar-item-active-color`; it is gone with no alias (it had zero consumers outside its single call site, and keeping both names would preserve the very ambiguity being removed). `--sidebar-item-active-background-alpha` HAS A CEILING OF 16%: the label rides on the fill, so raising the alpha walks the two together and contrast falls monotonically \u2014 measured on the v2.3 violet, 12% is 5.07:1 light / 7.51:1 dark on the sidebar\'s `--card` (8.30:1 where the nav sits on `--background`), 16% is 4.69:1 light, 18% is the last step still clearing WCAG 2.2 SC 1.4.3, 19% is 4.42:1 and fails. 16% is the cap because a nav moved onto `hsl(var(--muted))` only has 13%. Pinned by src/tokens/__tests__/sidebar-active-contrast.test.ts.'},{name:"--list-row-compact-{padding-y,padding-x,gap,body-min-width}",category:"component",tier:"component",role:'ListRow `density="compact"` inline-actions geometry \u2014 the compact invitation/history row: a 36px leading Avatar, a shrinkable title+description and one or two small trailing Buttons on ONE line inside the canonical 358px card (326px content). `--list-row-compact-body-min-width` (6rem) is the compact body threshold \u2014 the default 12rem `--list-row-body-min-width` is what forced the actions (and a history Badge + date) onto a second line at 390px; it is consumed as `min(<token>, 100%)` exactly like the default knob, so the #224 wrap contract is intact and a cluster that genuinely cannot fit still wraps instead of widening the page root. `--list-row-compact-{padding-y,padding-x,gap}` are declared `initial` with the density-scaled default at the CALL SITE (`var(--space-2)` block, `var(--list-row-padding-x)` inline, `var(--space-2)` gap) \u2014 a `:root` binding would freeze compact rows at the `:root` density. Measured at 390px: invitation row 62px (was 126px, actions wrapped), history row 41px (was 114px), documentElement scrollWidth === clientWidth.'},{name:"--list-row-{body-min-width,trailing-gap,indicator-size,read-background,unread-background,indicator-color}",category:"component",tier:"component",role:"ListRow shrink + unread state. `--list-row-body-min-width` (12rem) is consumed as `min(<token>, 100%)` \u2014 the `min()` is load-bearing, a bare length re-inflates the row's intrinsic width and reintroduces page-root overflow. `--list-row-trailing-gap` spaces wrapped trailing actions. The unread trio are role-mirror knobs declared `initial` with the role at the call site: `--list-row-unread-background` defaults to `hsl(var(--muted))` NOT `--accent` \u2014 accent measured 4.23:1 against the xs muted-foreground description line, below WCAG AA; muted is 4.63:1 light / 5.47:1 dark. `--list-row-indicator-color` (\u2192 `--primary`) and `--list-row-indicator-size` drive the unread dot, whose meaning is carried by localized sr-only text, never by colour alone."},{name:"--filter-bar-scroll-padding-y",category:"component",tier:"component",role:'Scrollbar gutter for `<FilterBar overflow="scroll">`, default `var(--space-1)`. Only applies at \u2265640px, where a wide filter set becomes a single nowrap strip with a sticky inline-end clear-all; below that the bar still stacks, so the gutter would be dead space. Pair with the existing `--filter-bar-sticky-background` (already an `initial` role-mirror knob) when theming the strip.'},{name:"--filter-bar-{search-width,filter-width,chip-gap,section-gap}",category:"component",tier:"component",role:"FilterBar typed-model geometry \u2014 every list page gets the SAME search width, filter width, chip rhythm and section stacking without page-local CSS (rule #45: theme sets once, className overrides per instance). `--filter-bar-search-width` (20rem) sizes the model search slot; `--filter-bar-filter-width` (\u2192 `--filter-picker-width-md`) is the min inline size of each typed filter group; both apply from 640px up, consumed as `min(100%, <token>)` so a 390px viewport never overflows with long JA/EN/VI labels (below 640px everything stacks full-width). `--filter-bar-chip-gap` (`--space-2`) spaces the applied-chips row; `--filter-bar-section-gap` (`--space-2`) stacks strip \u2192 chips \u2192 result-count/error line."},{name:"--app-shell-{sidebar-width,rail-width}",category:"component",tier:"component",role:"AppShell docked navigation TRACK widths. `--app-shell-sidebar-width` (default 16rem) is the sidebar expanded; `--app-shell-sidebar-collapsed-width` (default 4rem) is the SAME track at `<AppShell sidebarCollapsed>`; `--app-shell-nav-rail-width` (default 4rem) is a SECOND, separate track that exists only when the `navRail` slot is filled. These were hard-coded `grid-template-columns` literals; a service on a different design grid (e.g. a 255px sidebar) now sets ONE token in its theme instead of forking `.app-root`. Below the 900px shell breakpoint every track collapses to a single full-width column and both navigation columns move into AppShell's drawer. NOTE for anyone reading 19.x code or themes: the collapsed-sidebar token shipped as `--app-shell-rail-width` through 19.x and was renamed in 20.0.0 with NO alias, because it collided with the real rail added in the same release \u2014 two tokens, both 4rem, both spelled 'rail', meaning different things."},{name:"--app-shell-bar-{inset,inset-compact,gap}",category:"component",tier:"component",role:"AppShell top-bar chrome \u2014 `--app-shell-bar-inset` is the bar's inline padding, `--app-shell-bar-inset-compact` the tighter value below the compact step, `--app-shell-bar-gap` the gap between the bar's direct children (default --space-3). ONE OWNER FOR THE HORIZONTAL PAGE-INSET AXIS: the bar sits in the SAME grid track as `.app-main`, directly above the page, so its first control and the page title are on one vertical edge. The two insets used to name their own values (--space-4 / --space-3) while the page named --space-page-x / --space-page-compact-x, and nothing reconciled them \u2014 measured in Chromium, the bar's content started at x=80 and the page header's at x=88 (1512px), and because the two sides stepped at DIFFERENT breakpoints (shell 900px, page 720px) the error was not even constant (8px at 1512, 12px between 720 and 900, 4px below 720), which a consumer cannot correct by hand. The page gutter now OWNS the axis and these knobs read it: `--app-shell-bar-inset: var(--space-page-x)` (24px), `--app-shell-bar-inset-compact: var(--space-page-compact-x)` (16px), stepping at the PAGE's `(max-width: 720px)`, not the shell's 900px restructure. GEOMETRY MOVED \u2014 the bar's inline padding went 16px \u2192 24px (12px \u2192 16px compact, and 12px \u2192 24px between 720 and 900); the page did not move. The NAMES are unchanged, so a theme that already sets either knob keeps working, and a bar that genuinely wants to sit tighter than its page still has its own. Height stays `--app-shell-bar-height` (3rem) at EVERY width, and it is also the owner of the chrome BAND-HEIGHT axis \u2014 see `--page-header-min-block-size-chrome`."},{name:"--topbar-{height,inset,gap}",category:"component",tier:"component",role:"Standalone `<Topbar>` box knobs. Topbar is a pure slot bar, so the defaults are the QUIET ones and rendering is unchanged from before they existed: `--topbar-height: auto` and `--topbar-inset: 0px` (inside AppShell the `.app-topbar` grid row owns height and inset), `--topbar-gap: var(--space-2)`. A service that mounts Topbar DIRECTLY on a page sizes it from the theme (`--topbar-height: 3.5rem; --topbar-inset: var(--space-4)`) instead of an app-local class. `--topbar-gap` is both the gap BETWEEN the start/center/end clusters and the gap INSIDE each, so one knob re-rhythms the whole bar. None of them touch the shrink contract (start clips, center yields first, end stays anchored inline-end)."},{name:"--{dialog,sheet}-overlay-background / --app-shell-mobile-nav-background (+ -alpha)",category:"component",tier:"component",role:"Overlay scrims. All three are ROLE-MIRROR knobs declared `initial` at `:root`, with the default resolved at the CALL SITE as a SHARE of the one semantic `--overlay-background` \u2014 `color-mix(in srgb, var(--overlay-background) var(--<x>-overlay-alpha), transparent)`. Previously each carried a private literal, so setting `--overlay-background` had NO effect anywhere. The share knobs (`--dialog-overlay-alpha` 60%, `--sheet-overlay-alpha` 40%, `--app-shell-mobile-nav-alpha` 40%) keep every default byte-identical (0.3 / 0.2 / 0.2 black) while letting one `--overlay-background` override retint the whole system, including scoped `[data-tenant]` / `.dark` themes. Setting a `*-overlay-background` knob directly still wins outright. NOTE: overlays render in a portal, so a multi-tenant scope must also sit on the portal container."}];function I(e){return C.filter(t=>t.category===e)}var $=[{name:"--actions-gap",value:"var(--space-1)",description:"Gap between actions. Tight on purpose \u2014 the strip is a cluster, not a row of page buttons."},{name:"--actions-padding-block",value:"var(--space-1)",description:"Inset of the `filled` / `outlined` forms. `borderless` drops both to zero."},{name:"--actions-padding-inline",value:"var(--space-1)",description:'Actions component tokens \u2014 the strip of actions under an assistant message (Ant Design X `Actions`). Every action is a `Button`, so NOTHING here sets a control height: that comes from the `--control-height` tier through Button\'s own `size="icon-sm"` step, and restating it would re-derive a tier that drifts from the buttons beside it (`pnpm check:control-sizing`).'},{name:"--actions-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--actions-filled-background",value:"initial",description:"Chrome of the two bounded variants. Role-mirror knobs (docs/TOKENS.md): `initial` so each documented default resolves at the CALL SITE. Default filled ground = hsl(var(--muted)) Default outlined stroke = var(--stroke-hairline) solid hsl(var(--border))"},{name:"--actions-outlined-border",value:"initial",description:'Actions component tokens \u2014 the strip of actions under an assistant message (Ant Design X `Actions`). Every action is a `Button`, so NOTHING here sets a control height: that comes from the `--control-height` tier through Button\'s own `size="icon-sm"` step, and restating it would re-derive a tier that drifts from the buttons beside it (`pnpm check:control-sizing`).'},{name:"--actions-fade-offset-inline",value:"var(--space-2)",description:"`fadeIn` / `fadeInLeft` \u2014 the distance the strip travels along the inline axis. The DURATION is deliberately not a knob here. Timing belongs to the motion tier, for the same reason `src/tokens/components/activity.css` records: `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration, and a service retunes arrival motion once through `--duration-base` rather than per component. The animation reads that token directly, and drops to nothing under `prefers-reduced-motion`."},{name:"--activity-mark-size",value:"0.25em",description:"Mark geometry. `em`-based so the whole mark tracks `--activity-font-size-*` (and therefore `--font-size-base` and the density axis) instead of pinning a px diameter per size step."},{name:"--activity-mark-offset",value:"0.25em",description:"Travel of one `dots` step \u2014 the loop counterpart to `--reveal-distance`, named to match. It is ALSO the height the mark row reserves, so the indicator appearing under a composer never shifts the row."},{name:"--activity-mark-rest-alpha",value:"0.35",description:"Resting opacity of a dot at the bottom of its cycle. Never 0: a dot that vanishes reads as a rendering bug at the trough, and the reduced-motion resting state must stay fully legible."},{name:"--activity-pulse-mark-size",value:"0.5em",description:"The single `pulse` mark \u2014 a breathing dot (live / recording), bigger than one `dots` dot because it carries the whole affordance alone."},{name:"--activity-gap",value:"var(--space-1)",description:"Mark-to-mark and mark-to-label gap."},{name:"--activity-font-size-xs",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Root size ladder \u2014 the mark is `em`-based, so this ONE value scales the whole indicator. Steps mirror the `Text` size the label is rendered at, so mark and label stay optically paired (`--font-size-sm` IS `--font-size-base`; the ladder skips the alias)."},{name:"--activity-font-size-sm",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-font-size-md",value:"var(--font-size-sm, var(--font-size-base))",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-font-size-lg",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-bar-width",value:"4rem",description:"Indeterminate `bar` (syncing). Width is an inline measure, not a fill: the bar sits beside a label in a row, so `100%` would eat the label's space."},{name:"--activity-bar-radius",value:"var(--radius-pill)",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-bar-segment-width",value:"40%",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-bar-track-alpha",value:"0.2",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-bar-height",value:"0.25em",description:"scale-exempt: an em thickness that must track the label beside it, not a fixed band step"},{name:"--activity-color",value:"initial",description:'Mark colour. ROLE-MIRROR KNOB \u21D2 declared `initial` here with the role default at the CALL SITE (`hsl(var(--activity-color, var(--muted-foreground)))` in styles/motion.css). Written as `--activity-color: var(--muted-foreground)` it would freeze at the `:root` role value and a scoped `[data-tenant]` / `.dark` override of `--muted-foreground` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`". Documented default: --activity-color = var(--muted-foreground) (tone="muted").'},{name:"--affix-inset-block-start",value:"0px",description:"Distance from the scrollport's BLOCK-START edge at which an Affix pins, and the distance it sits at once pinned. Ant Design `offsetTop`, whose default is `0`; ported as that default."},{name:"--affix-inset-block-end",value:"0px",description:"The same, from the BLOCK-END edge \u2014 the sticky form footer rather than the sticky header. Ant Design `offsetBottom` has no default at all, because in antd the PRESENCE of the prop is what selects bottom pinning. That selection is still the prop's here; this is only the length it pins at."},{name:"--anchor-ink-width",value:"2px",description:"Thickness of the ink rail \u2014 its inline size in a vertical anchor, its block size in a horizontal one. A hairline by default, matching the list's own leading rule."},{name:"--anchor-ink-color",value:"initial",description:"Paint of the ink rail, and of the active row's label. `initial` + a call-site fallback, NOT `var(--primary)` here, because `--primary` is exactly the role a tenant re-scopes: a `[data-tenant] { --primary: \u2026 }` would override the role and never reach a knob that had already frozen against `:root`'s copy of it, so the rail would keep the default brand's colour under the tenant's. docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\", and src/tokens/__tests__/tenant-scope-freeze-687.test.ts is the guard. Documented default: `hsl(var(--primary))`."},{name:"--anchor-track-color",value:"initial",description:"Paint of the rail's TRACK \u2014 the full-length rule the ink slides along. Same freeze rule, same shape. Documented default: `hsl(var(--border))`."},{name:"--anchor-item-padding-block",value:"var(--space-1)",description:"Vertical rhythm of one row: the block padding above and below a label. The row's HEIGHT is this plus the label's own line box, deliberately \u2014 an anchor row is a line of running text, not a control, so it must not be pinned to the `--control-height` tier (which is also re-scoped by AuthShell, and would freeze if mirrored)."},{name:"--anchor-item-padding-inline",value:"var(--space-3)",description:"Inline distance from the rail to the label."},{name:"--anchor-nested-padding-inline",value:"var(--space-4)",description:"Extra inline indent applied to a NESTED row \u2014 antd's one level of `items[].children`."},{name:"--anchor-gap",value:"var(--space-inline-lg)",description:"Gap between rows on the HORIZONTAL axis. The vertical axis has none: its rows sit flush so the ink rail reads as one continuous rule."},{name:"--attachments-gap",value:"var(--space-2)",description:"Gap between cards in the list. Ant X: `marginXS` = 8px."},{name:"--attachments-card-size",value:"16.75rem",description:"THE CARD BOX. Ant X's file card is a fixed 268x68 chip: wide enough for a name plus one line of description, short enough that a row of them reads as a tray and not as a list. Both axes are fixed there and fixed here \u2014 the block size is what the `+` tile and the `scrollY` one-row viewport are measured against, so it has three readers, not one. Ant X `width: 268`"},{name:"--attachments-card-block-size",value:"4.25rem",description:"Ant X `cardHeight` = 14 * 1.5714 * 2 + 12 + 12 = 68"},{name:"--attachments-card-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; `initial`, default = var(--radius). Ant X `token.borderRadius` = 6 \u2261 --radius"},{name:"--attachments-card-gap",value:"var(--space-3)",description:"Ant X `marginSM` \u2014 glyph to name"},{name:"--attachments-placeholder-space-inset",value:"var(--space-4)",description:"THE PLACEHOLDER \u2014 the whole control while the list is empty, and the drop target. Ant X `token.padding` = 16"},{name:"--attachments-placeholder-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; `initial`, default = var(--radius). Ant X `token.borderRadius` = 6 \u2261 --radius"},{name:"--attachments-placeholder-icon-size",value:"var(--icon-size-3xl)",description:"Ant X's placeholder mark is `fontSizeHeading2` = 30px, which is not a step of this repo's nine-value icon scale (gh#326) and whose neighbours are 24 and 36. It stays on the step the frozen table in `src/tokens/__tests__/icon-size-scale.test.ts` already records for it \u2014 the same mark Upload's dropzone draws, which is the surface a reader meets this one beside."},{name:"--attachments-placeholder-title-font-size",value:"var(--font-size-base)",description:"Attachments \u2014 Ant Design X chat-surface file collection. Ant X retunes this through `styles={{ list, placeholder, upload, \u2026 }}`. Here every length and tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not always so: all twelve of these resolved, were generated into the MCP catalog, were described to every consumer \u2014 and nothing anywhere read one of them, because the component had no stylesheet at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences."},{name:"--attachments-placeholder-description-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Attachments \u2014 Ant Design X chat-surface file collection. Ant X retunes this through `styles={{ list, placeholder, upload, \u2026 }}`. Here every length and tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not always so: all twelve of these resolved, were generated into the MCP catalog, were described to every consumer \u2014 and nothing anywhere read one of them, because the component had no stylesheet at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences."},{name:"--attachments-placeholder-gap",value:"var(--space-1)",description:"Attachments \u2014 Ant Design X chat-surface file collection. Ant X retunes this through `styles={{ list, placeholder, upload, \u2026 }}`. Here every length and tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not always so: all twelve of these resolved, were generated into the MCP catalog, were described to every consumer \u2014 and nothing anywhere read one of them, because the component had no stylesheet at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences."},{name:"--attachments-drop-overlay-background",value:"initial",description:"The scrim the drop layer paints over the whole control while a file is dragged across it. Role-mirror knob, so `initial` and the role resolved at the CALL SITE (docs/TOKENS.md) \u2014 a `[data-tenant]`/`.dark` scope that re-seeds `--background` must reach this. Documented default = `color-mix(in srgb, hsl(var(--background)) 85%, transparent)`, which is Ant X's `colorBgPlaceholderHover` (`colorBgContainer` at alpha .85)."},{name:"--attachments-remove-icon-size",value:"var(--upload-remove-icon-size)",description:"The \u2715 at the end of a card's row. Ant X draws it at `fontSizeLG` = 16; it stays at the 14px step the frozen icon table records, which is also `--upload-remove-icon-size`. Two remove affordances in one group drawing two different sizes is the defect, not the saving."},{name:"--badge-space-gap",value:"var(--space-inline-xs)",description:"Badge component tokens."},{name:"--badge-space-x",value:"var(--space-2)",description:"Badge component tokens."},{name:"--badge-space-y",value:"var(--space-1)",description:"Badge component tokens."},{name:"--badge-radius",value:"initial",description:"Corner of the chip (gh#404). Default = the historical literal `--radius-md`, so nothing moves; it exists so a NESTING context can restate it through the cascade (a Badge inside a bordered Button squares down to --radius-sm) and a call site can restate it back. gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--badge-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Badge component tokens."},{name:"--badge-line-height",value:"calc(1 / 0.75)",description:"Companion to --badge-font-size (gh#260). The cva's old `text-xs` utility also set line-height via Tailwind's default `--text-xs--line-height: calc(1 / 0.75)` (the theme remaps --text-xs but never that companion). Same unitless ratio here keeps the default badge pixel-identical now that badge-layout.css owns the type metrics."},{name:"--badge-icon-size",value:"var(--icon-size-xs)",description:"Leading/trailing glyph inside the pill. It was a bare `0.75rem` in badge-layout.css with no token at all, so a service could only resize it with `!important` or a forked stylesheet \u2014 the two routes the icon axis's tier 2 exists to abolish (gh#326). Same step, so nothing moves. Matches --badge-font-size's step by design: the glyph reads as a character in the label's run, so the two retune together. Deliberately NOT --scaling-multiplied \u2014 the literal it replaces did not track density."},{name:"--badge-space-x-removable",value:"var(--space-1)",description:"Removable chip (antd Tag closable) \u2014 \xD7 affix inside the pill."},{name:"--badge-remove-offset-inline-end",value:"calc(-1 * var(--space-1))",description:"Badge component tokens."},{name:"--badge-remove-icon-size",value:"var(--badge-icon-size)",description:"Badge component tokens."},{name:"--badge-remove-rest-alpha",value:"0.7",description:"Badge component tokens."},{name:"--badge-remove-hover-alpha",value:"1",description:"Badge component tokens."},{name:"--badge-tint-fill",value:"18%",description:"DATA COLOUR (`color` prop) \u2014 the entity's own colour, not a semantic tone. A caller colour is DATA: a project administrator picks it for a status, an issue type, a tag, a label. Solid, no foreground clears WCAG AA for every colour they can pick \u2014 near-black and white measure equal at luminance 0.2029, where both land on 4.15:1, under the 4.5 that badge-sized text needs, and a real picker can produce that. So the GROUND moves instead: the colour is washed into the surface and the label stays the surface's own foreground, which makes the ratio a function of these two knobs rather than of the colour somebody chose. The fill is where the label sits, so it is quiet; the edge carries no text, so it is free to be four times as saturated \u2014 it is what keeps a pale tint from dissolving into the surface, and where the colour still says WHICH status at a glance. At these defaults the worst case across the sRGB cube measures 8.52:1 (both themes), against 4.15 for a solid chip."},{name:"--badge-tint-edge",value:"45%",description:"Badge component tokens."},{name:"--badge-tint-surface",value:"initial",description:"`initial`, NOT `hsl(var(--card))` \u2014 the :root freeze rule (docs/TOKEN-RESOLUTION.md \xA73). Bound here, `var(--card)` substitutes against the ROOT's card once, so a `.dark` REGION below root moved `--card` and the chip kept the light one. Measured: in a `.dark` region the scope reported `--card: 48 8% 12%` while the chip still painted `color(srgb 0.9933 0.9933 0.9867)` \u2014 a white chip in a dark panel. `.dark` on `<html>` was always right, which is why it survived: the freeze only shows where the scope sits BELOW the binding. Same shape as gh#848 and gh#866; found by `scripts/explain-token.mjs`. The formula now lives at the call site in badge-layout.css, where the scope is in effect."},{name:"--badge-tint-foreground",value:"initial",description:"Badge component tokens."},{name:"--badge-color",value:"initial",description:"`initial` FOR THE SAME REASON, and getting this wrong once is how I learned to measure twice: the first fix moved `--badge-tint-surface` to the call site but left this one bound here as `var(--badge-tint-surface, hsl(var(--card)))`. That still substitutes at :root, so in a `.dark` region the chip mixed the LIGHT card into the dark surface and painted `color(srgb 0.285\u2026)` where `.dark` on `<html>` painted `0.1296` \u2014 a fix that moved the defect instead of removing it, and one a screenshot would have called correct. The whole chain is now resolved at the call site. The old warning still holds \u2014 an UNSET custom property makes color-mix() invalid at computed-value time and drops the background AND the border \u2014 which is exactly why every read below carries the full fallback rather than relying on this declaration."},{name:"--banner-radius",value:"0",description:"Square corners \u2014 a strip spans its container edge-to-edge, so it carries no radius."},{name:"--banner-border-width",value:"initial",description:"The strip keeps a single hairline block-end rule (tone-coloured via the alert border rules); inline/block-start edges are open so it reads as part of the frame. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--banner-space-inset-block",value:"var(--space-3)",description:"Strip inset. Block is denser than the inline Alert card; inline defaults to the page gutter so banner text aligns with page content under AppShell/PageContainer."},{name:"--banner-space-inset-inline",value:"var(--space-page-active-x, var(--space-6))",description:'Banner \u2014 the full-bleed attention strip (<Banner> = Alert variant="banner"). Colour stays with the alert tone rules; these tokens own ONLY the strip geometry, so a service retunes the banner once here instead of forking alert-layout.css (rule #45 \u2014 every service-tunable constant gets a knob).'},{name:"--callout-rail-width",value:"var(--space-1)",description:"A leading RAIL, not a frame: an aside inside prose reads as an annotation of the column it sits in, and four borders make it a card that interrupts the column."},{name:"--callout-radius",value:"initial",description:"Squared off against the rail; the trailing corners still follow the alert radius. `initial`, not `var(--alert-radius)` \u2014 a :root binding freezes (gh#888); default resolves at the call site. Default = var(--alert-radius)."},{name:"--callout-space-inset-block",value:"var(--space-3)",description:"Prose insets. Block matches the paragraph rhythm around it rather than the denser banner strip; inline leaves room for the rail without shifting the text."},{name:"--callout-space-inset-inline",value:"var(--space-4)",description:'Callout \u2014 the in-prose aside (<Callout> = Alert variant="callout"). Colour stays with the alert tone rules; these tokens own ONLY the aside geometry, so a service retunes every callout once here instead of forking alert-layout.css (rule #45 \u2014 every service-tunable constant gets a knob).'},{name:"--callout-space-stack",value:"var(--space-4)",description:"Block margin \u2014 a callout separates from the paragraphs it sits between."},{name:"--card-space-inset",value:"var(--space-section-active)",description:"Horizontal inset of every slot (header / content / footer) + the resting top/bottom shell padding. This is the column the title, body and footer all align to."},{name:"--card-space-shell-y",value:"initial",description:'BLOCK-axis (top/bottom) shell padding of the slotted card rhythm \u2014 a plain header\'s top, a `solo` body\'s top, and the terminal slot\'s bottom (gh#232). Split off --card-space-inset so a shell (AuthShell compact) can retune the card\'s height WITHOUT moving the inline column. Declared `initial` \u2014 NOT `var(--card-space-inset)` \u2014 so the default resolves at the CALL SITE: a :root binding would freeze at the :root inset and `[data-density="tight"|"cozy"]` (which override --card-space-inset on the card element) would stop reaching it. See docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 the same call-site rule applies to derived knobs. default = var(--card-space-inset)'},{name:"--card-space-header-y",value:"var(--space-stack-sm)",description:"Vertical padding of a BANDED header band (top = bottom). Drives --card-space-divided-y."},{name:"--card-space-body-y",value:"var(--space-section-active)",description:"Gap between the header and the body, and the body's own top padding \u2014 the breathing room under a title before content begins."},{name:"--card-space-solo-y",value:"initial",description:'Symmetric block padding for a SOLO content slot, so a composed shell can tune block and inline spacing independently without targeting CardContent. Declared `initial` for the SAME reason as --card-space-shell-y above: written as `var(--card-space-inset)` here it would freeze at the :root inset, and a card carrying [data-density="tight"|"cozy"] (which override --card-space-inset ON THE CARD) would keep the :root value. The default now resolves at the call site through the chain solo-y \u2192 shell-y \u2192 inset, so a solo body follows the general block knob when only that is set, and an explicit solo-y still wins. default = var(--card-space-shell-y, var(--card-space-inset))'},{name:"--card-space-footer-y",value:"var(--space-stack-sm)",description:"Vertical padding of a SEPARATED footer band (top = bottom). Drives --card-space-divided-y."},{name:"--card-space-divided-y",value:"var(--card-space-header-y)",description:"DIVIDED-section vertical padding (rule #44/#45). A header/footer that carries a divider border (banded header, separated footer) reads as its own band, so it pads SYMMETRICALLY top+bottom \u2014 distinct from a plain header that flows into the body (top inset, no bottom). One themeable knob keeps the header- and footer-band rhythm in sync; a service theme tunes the band density here instead of forking per-slot CSS."},{name:"--card-space-gap",value:"var(--space-stack-xs)",description:"Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."},{name:"--card-title-font-size",value:"var(--font-size-base)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-title-line-height",value:"var(--line-height-tight)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-title-font-weight",value:"var(--font-weight-semibold)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-description-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-description-line-height",value:"var(--line-height-normal)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-background",value:"initial",description:'Card fill + edge \u2014 opt-in knobs that DEFAULT to the live --card / --border roles. Declared `initial` (not `var(--card)`) so the default re-resolves at the call site under a scoped theme: a :root binding to a role var freezes at the :root value and a scoped `[data-tenant]` override of the role never reaches it (see docs/STANDARDS-vocabulary-tokens.md \xB7 "role-mirror knobs"). A service still overrides the knob directly (--card-background: \u2026) to win over the role default. default = hsl(var(--card))'},{name:"--card-border",value:"initial",description:"default = hsl(var(--border))"},{name:"--card-header-background",value:"initial",description:"Banded-header fill \u2014 role-tintable (rule #45): a service points this at any role, e.g. --card-header-background: var(--primary), and tunes --card-header-background-alpha for the wash strength. Default = the live --muted role (resolved at the call site). default = hsl(var(--muted))"},{name:"--card-header-background-alpha",value:"0.55",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-header-border-bottom",value:"initial",description:"Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it dashed / heavier / none without forking CSS. Pair with --card-header-background-alpha: 0 for a quiet borderless-band header. Default = 1px solid hsl(var(--card-border)) (resolved at the call site)."},{name:"--card-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) * var(--radius-ratio))"},{name:"--card-shadow",value:"initial",description:"The DXS hi-fi baseline uses a quiet 10px data surface with one shadow-sm elevation layer. Consumers can still flatten or lift cards through this knob. `initial`, NOT `var(--shadow-sm)` \u2014 a role-mirror knob written here binds at `<html>` and a scope below root that restates the elevation ramp can never reach it (docs/TOKEN-RESOLUTION.md \xA73). The default now resolves on `.ui-card`, so a `[data-tenant]`/`[data-theme]` region that sets `--shadow-sm` moves its own cards and nothing else. gh#880 item 7. default = var(--shadow-sm), resolved at the call site"},{name:"--card-glow",value:"0 0 0 0 transparent",description:"Brand glow layer \u2014 invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the surface box-shadow so a service can wash every card with the global glow, e.g. --card-glow: var(--shadow-glow), with no markup change."},{name:"--card-hover-shadow",value:"var(--shadow-md)",description:"`hoverable` (antd `hoverable`) \u2014 the elevation a pointer-interactive card steps UP to on hover. One step above the resting `--card-shadow` on the same ramp, so a service that has already flattened or lifted every card keeps a proportional lift instead of a fixed one."},{name:"--card-tint",value:"transparent",description:"Fill tint \u2014 subtle role wash over the card background (default transparent = invisible). Painted as an overlay so a service sets --card-tint: hsl(var(--primary) / 0.04) once."},{name:"--card-tint-end",value:"initial",description:'THE OTHER END OF THE TINT, AND ITS DIRECTION (gh#880 item 6). The wash used to be painted `linear-gradient(var(--card-tint), var(--card-tint))` \u2014 the same variable twice \u2014 which is a flat overlay wearing a gradient\'s clothes. A service that wanted a genuine two-colour wash had one value slot for two colours, so `--card-tint: A, B` expanded to `linear-gradient(A, B, A, B)`: a hard split, not a ramp. A glass card\'s rim highlight is a diagonal two-stop ramp (docs/GLASSMORPHISM-STANDARD.md \xA71), so this is the difference between "a card can be glass" and "a card can be tinted". BOTH ARE `initial` WITH THEIR DEFAULT AT THE CALL SITE, so the default value is the live `--card-tint` of whatever scope the card is in, not the one frozen at `<html>`, and the resting card paints `linear-gradient(to bottom, transparent, transparent)` exactly as before. default = var(--card-tint) \u2014 a single-colour wash stays flat'},{name:"--card-tint-angle",value:"initial",description:"default = `to bottom`, the direction the two-stop form already had"},{name:"--card-backdrop-blur-size",value:"initial",description:"GLASS (gh#880 item 1) \u2014 `initial`, i.e. OFF, and the default must stay `initial` rather than `0px`. An element with a `backdrop-filter` becomes the containing block for its fixed descendants (the trap `src/styles/shell-layout.css` documents on the app-launcher scrim and `src/components/layout/affix.tsx` documents for Affix), and `blur(0px)` still promotes the box to a backdrop root. Unset, the whole declaration at `.ui-card` is invalid-at-computed-value-time and `backdrop-filter` keeps its own initial `none`, so no backdrop root is created and an `Affix` inside a Card still positions against the viewport. The saturate companion is shared: `--surface-backdrop-saturate` (tokens/foundation.css). default = none \u2014 a card blurs nothing"},{name:"--card-accent-rail-width",value:"initial",description:"Accent edge \u2014 width of the semantic leading-edge stripe (data-accent). Tokenised (rule #44) so a service theme can re-tune it without forking CSS. The slot padding compensation in card-layout.css subtracts the same token, so content stays aligned on the shell whatever the rail width. default = var(--stroke-2xl), resolved at the call site (gh#906)"},{name:"--card-accent-perimeter-width",value:"initial",description:'Accent placement `perimeter` (gh#12) \u2014 the FULL attention border. Two knobs so a service can tune the edge weight and the outer ring independently; the defaults reproduce the optical weight of `variant="featured"` (1px border + 1px ring) in the card\'s own semantic accent tone instead of --primary. Structural strokes, like the base card hairline: both read the hairline step at their call sites since gh#906, so a theme restating the stroke scale moves them with everything else. default = var(--stroke-hairline), resolved at the call site (gh#906)'},{name:"--card-accent-perimeter-ring-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--card-featured-border-color",value:"initial",description:'`variant="featured"` edge \u2014 role-mirror knob (docs/TOKENS.md). `initial` so the --primary default resolves at the CALL SITE and a scoped [data-tenant]/.dark override of --primary reaches it; a service points it anywhere (e.g. var(--attention)) to retint every featured card at once. Default = hsl(var(--primary)).'},{name:"--card-featured-ring-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--stat-card-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-label-font-weight",value:"var(--font-weight-medium)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-label-letter-spacing",value:"0.04em",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-value-font-size",value:"var( --font-size-2xl, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-value-line-height",value:"1.1",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-value-font-weight",value:"var(--font-weight-semibold)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-hint-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-gap",value:"var(--space-stack-xs)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-icon-size",value:"var(--icon-size-2xl)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-icon-glyph-size",value:"var(--icon-size-lg)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-icon-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--stat-card-icon-background",value:"initial",description:"Medallion tint \u2014 soft brand wash + brand glyph by default; a service retints by overriding --primary or these tokens directly (rule #44/#45). `initial` so the --primary default re-resolves at the call site under a scoped theme (no :root freeze). Defaults = hsl(var(--primary) / 0.1) fill \xB7 hsl(var(--primary)) glyph."},{name:"--stat-card-icon-foreground",value:"initial",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-delta-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-space-gap",value:"var(--space-stack-sm)",description:"\u2500\u2500 ServiceLauncherCard (gh#219) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Internal rhythm of a launcher tile: one gap knob drives the vertical stack AND the icon\u2194title\u2194status row, so a service theme retunes the whole tile density once."},{name:"--card-service-launcher-icon-size",value:"calc(var(--icon-size-2xl) * var(--scaling))",description:"Semantic icon surface \u2014 36px, the `--icon-size-2xl` step, multiplied by --scaling so the medallion still breathes with its sibling controls (the gh#328 rule: an icon that wants density says so itself). It read `var(--control-height-lg)` until gh#324: a CONTROL tier is the wrong axis for an icon box, and the bug was visible \u2014 `@media (pointer: coarse)` lifts the control ladder to the 44px tap floor, so on every touch device the medallion silently inflated to 48px while the glyph inside it stayed 20px."},{name:"--card-service-launcher-icon-glyph-size",value:"calc(var(--icon-size-lg) * var(--scaling))",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-icon-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--card-service-launcher-icon-background",value:"initial",description:"Available-service medallion tint. `initial` (role-mirror rule, docs/TOKENS.md) so the role defaults resolve at the CALL SITE and a scoped [data-tenant]/.dark override reaches them. Defaults = hsl(var(--accent)) fill \xB7 hsl(var(--primary)) glyph."},{name:"--card-service-launcher-icon-foreground",value:"initial",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-unavailable-icon-background",value:"initial",description:"Unavailable medallion tint \u2014 applied when the consumer supplies `disabledReason`, so an un-launchable service never reads as brand-live. `initial` for the same role-mirror reason. Defaults = hsl(var(--muted)) fill \xB7 hsl(var(--muted-foreground)) glyph."},{name:"--card-service-launcher-unavailable-icon-foreground",value:"initial",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Description prose \u2014 also drives the disabled-reason line and the catalog-CTA caption."},{name:"--card-service-launcher-description-line-height",value:"var(--line-height-body)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-metadata-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Mono metadata line (hostname \xB7 plan) \u2014 tighter leading than prose by design."},{name:"--card-service-launcher-metadata-line-height",value:"var(--line-height-normal)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-cta-min-height",value:"calc(var(--control-height-lg) * 4)",description:"Dashed catalog/add companion tile: kept tall enough to sit level with a populated launcher tile in the same grid row. Four control tiers \u2248 medallion + title + description + action."},{name:"--card-service-launcher-skeleton-title-width",value:"var(--space-12)",description:"Skeleton bar widths \u2014 shape-matched placeholders for the title and status badge."},{name:"--card-service-launcher-skeleton-status-width",value:"var(--space-10)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--chart-trend-plot-height-xs",value:"3.5rem",description:"\u2500\u2500 Plot height tiers (size = xs|sm|md|lg) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 `xs` is the canonical dashboard-summary-card density: a seven-day trend that sits under a KPI headline without stealing its vertical rhythm. A service retunes the whole scale here; a screen picks a step with the `size` prop."},{name:"--chart-trend-plot-height-sm",value:"5rem",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-plot-height-md",value:"7.5rem",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-plot-height-lg",value:"10rem",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-plot-height",value:"var(--chart-trend-plot-height-xs)",description:"Active tier \u2014 chart-layout.css re-points this per `data-size`; overriding it directly pins one height for every trend regardless of `size`."},{name:"--chart-trend-bar-gap",value:"var(--space-2)",description:"\u2500\u2500 Bar marks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Thin marks, a surface gap between neighbours and a rounded data-end anchored to the baseline (the data-visualization mark spec)."},{name:"--chart-trend-bar-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--chart-trend-bar-max-width",value:"1.5rem",description:"Ceiling on a single mark so a 3-point trend does not render slabs."},{name:"--chart-trend-bar-min-height",value:"initial",description:"Floor so a zero/absent value still reads as a plotted category rather than a hole. default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--chart-trend-bar-background",value:"initial",description:'Muted mark fill \u2014 role-mirror knob, declared `initial` so the role default re-resolves at the CALL SITE under `.dark` / `[data-tenant]` (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Default = hsl(var(--muted-foreground) / 0.75), which clears the 3:1 non-text contrast floor (WCAG 1.4.11) against the card surface.'},{name:"--chart-trend-bar-background-alpha",value:"0.75",description:"Opacity applied to the muted-fill role default."},{name:"--chart-trend-bar-emphasis-background",value:"initial",description:'Emphasized ("current") mark fill \u2014 role-mirror knob. Default = hsl(var(--primary)).'},{name:"--chart-trend-baseline-border",value:"initial",description:"\u2500\u2500 Baseline + category ticks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Chrome defaults QUIET (rule #44): no baseline rule at rest. A service opts in with `--chart-trend-baseline-border: var(--stroke-hairline) solid hsl(var(--border));`."},{name:"--chart-trend-tick-gap",value:"var(--space-1)",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-tick-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-footer-gap",value:"var(--space-2)",description:"Gap between the plot block and the optional activity footer slot."},{name:"--chart-category-axis-gap",value:"var(--space-2)",description:"\u2500\u2500 Category axis (horizontal BarChart) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The category axis of a horizontal bar chart holds free text, and in Japanese that text is a company name of 8\u201310 full-width glyphs (100\u2013125px at the tick size). recharts reserves a flat 60px whatever the ticks say, which painted those names OUTSIDE the plot box where the SVG clip cut them from the START \u2014 losing exactly the identifying `\u682A\u5F0F\u4F1A\u793E` (gh#409 \xB7 1). The chart now measures its widest tick and sizes the axis from it. These two knobs own the limits of that: how much air sits between the tick and the plot, and how much of the canvas a category axis may take before labels are truncated at their END instead. A service that runs longer names raises the fraction; one that wants the bars to dominate lowers it."},{name:"--chart-category-axis-max-fraction",value:"0.4",description:"Share of the canvas the category axis may occupy, 0..1. At the 1102px dashboard column this is ~440px \u2014 four times a 10-glyph \u5168\u89D2 name \u2014 so truncation is the exception, not the rule, while a pathological label still cannot squeeze the bars out of their own chart."},{name:"--chart-series-stroke-width",value:"2",description:"Stroke weight of the line, and of an area's top edge."},{name:"--chart-area-fill-alpha",value:"0.2",description:"Opacity of an area's filled band. Low by design: an area overlaps its neighbours, and the line above it is what carries the value."},{name:"--chart-grid-line-dash",value:"3 3",description:"Dash pattern of the cartesian background grid (any `stroke-dasharray` value; `none` = solid)."},{name:"--chat-bubble-background",value:"initial",description:"Bubble fill. `initial` so the --muted default re-resolves at the CALL SITE under a scoped theme; a :root binding to a role var freezes at :root (docs/TOKENS.md \u2014 the :root freeze rule). Documented default = hsl(var(--muted))."},{name:"--chat-bubble-foreground",value:"initial",description:"Ink on that fill \u2014 role-mirror knob, documented default = hsl(var(--foreground))."},{name:"--chat-bubble-border-color",value:"initial",description:"The 1px edge of an `outlined` bubble. Decorative chrome, so it mirrors --border, not --input (docs/TOKENS.md \u2014 `--border` vs `--input`). Documented default = hsl(var(--border))."},{name:"--chat-bubble-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--chat-bubble-gap",value:"var(--space-3)",description:"Gap between the avatar column and the message column."},{name:"--chat-bubble-max-inline-size",value:"34rem",description:"The measure a bubble never exceeds. Long-form assistant prose past ~70 characters per line stops being readable, and a chat pane is as wide as the window (#45 \u2014 a service retunes the measure to its own column)."},{name:"--chat-bubble-avatar-size",value:"initial",description:"Avatar box. Role-mirror of a RE-SCOPED tier (--control-height is re-declared per density and by the auth shell), so it is `initial` + a call-site fallback for the same reason a colour knob is. Documented default = var(--control-height)."},{name:"--chat-bubble-padding-block",value:"var(--space-2)",description:"Inner inset of the bubble body, at the default `md` step. The xs/sm/lg steps re-declare these two on the element itself (styles/data-display-layout.css)."},{name:"--chat-bubble-padding-inline",value:"var(--space-3)",description:"ChatBubble / ChatBubbleList component tokens \u2014 one message in a conversation, and the feed it lives in (docs/roadmap/ai-chat-components.md \xA72/\xA73). NAMING NOTE: the roadmap spelled the surface knob `--chat-bubble-surface`. `surface` is not one of the property words `check:token-tiers` accepts for the `--{component}-{part}-{property}` shape, so the knob ships as `--chat-bubble-background` \u2014 the same word every other component tier uses for the same role (`--card-background`, `--list-row-unread-background`)."},{name:"--chat-bubble-list-gap",value:"var(--space-4)",description:"Vertical rhythm BETWEEN messages in a ChatBubbleList."},{name:"--chat-bubble-list-jump-inset",value:"var(--space-3)",description:'Inset the "jump to latest" affordance keeps from the block-end edge of the feed.'},{name:"--chat-bubble-typing-caret-color",value:"initial",description:'The typed-so-far caret drawn while `typing` animates. Role-mirror knob, documented default = hsl(var(--muted-foreground)). Never the only signal: the article also carries `aria-busy` and a localized sr-only "typing" string.'},{name:"--chat-bubble-typing-caret-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--chat-bubble-typing-caret-height",value:"1em",description:"One line box tall, so the caret matches whatever type ramp the bubble is rendering at rather than a fixed pixel height a service theme could not move."},{name:"--chat-bubble-skeleton-short-inline-size",value:"60%",description:"The short line of the two-line loading Skeleton \u2014 a ragged second line is what makes the placeholder read as prose rather than as a bar chart. A theme can retune the raggedness."},{name:"--chat-bubble-tone-background-alpha",value:"0.08",description:"Status-tinted bubbles (`tone`) wash the role colour exactly like Alert does, so an error bubble and an error banner agree. Never colour alone \u2014 the bubble also renders a localized sr-only tone word."},{name:"--chat-bubble-tone-border-alpha",value:"0.35",description:"ChatBubble / ChatBubbleList component tokens \u2014 one message in a conversation, and the feed it lives in (docs/roadmap/ai-chat-components.md \xA72/\xA73). NAMING NOTE: the roadmap spelled the surface knob `--chat-bubble-surface`. `surface` is not one of the property words `check:token-tiers` accepts for the `--{component}-{part}-{property}` shape, so the knob ships as `--chat-bubble-background` \u2014 the same word every other component tier uses for the same role (`--card-background`, `--list-row-unread-background`)."},{name:"--chat-bubble-end-background",value:"initial",description:'The message column of an `end`-placed (own) bubble. Role-mirror knobs so a service can tint "my" messages without touching the assistant\'s. Documented defaults = hsl(var(--primary) / 0.1) and hsl(var(--foreground)).'},{name:"--chat-bubble-end-foreground",value:"initial",description:"ChatBubble / ChatBubbleList component tokens \u2014 one message in a conversation, and the feed it lives in (docs/roadmap/ai-chat-components.md \xA72/\xA73). NAMING NOTE: the roadmap spelled the surface knob `--chat-bubble-surface`. `surface` is not one of the property words `check:token-tiers` accepts for the `--{component}-{part}-{property}` shape, so the knob ships as `--chat-bubble-background` \u2014 the same word every other component tier uses for the same role (`--card-background`, `--list-row-unread-background`)."},{name:"--chat-composer-min-height",value:"initial",description:'Floor and ceiling of the draft box, both `initial` \u2014 and that is load-bearing, not tidiness. Their defaults READ `--control-height`, which is re-declared per size step on the composer itself (`.ui-control-surface[data-size="sm"]` and friends). Bound here at `:root`, each one would resolve ONCE against the root tier and freeze: measured in Chromium, all four of `size="xs|sm|md|lg"` rendered at an identical 55px box. `initial` sends the fallback chain in `data-entry-layout.css` back to the CALL SITE, where the step\'s own `--control-height` is in scope. Same rule as ListRow\'s dividers and the compact-row knobs (docs/TOKENS.md \u2014 the :root freeze rule). Default floor = var(--control-height) \u2014 exactly one control row. Default ceiling = calc(var(--control-height) * 5) \u2014 past it the draft scrolls itself instead of pushing the page. A MULTIPLIER, never `calc(var(--control-height) \xB1 \u2026)`, which silently re-derives a tier (check:control-sizing).'},{name:"--chat-composer-max-height",value:"initial",description:"ChatComposer component tokens \u2014 the message input of a conversation (Ant Design X `Sender`). The composer is a CONTROL, so its box height is not its own decision: both bounds below are expressed in the `--control-height` tier, which is density-aware. A resting one-line composer therefore lines up with the Button beside it, and every size step (`data-size`) moves both bounds together. Never restate either as a literal length \u2014 see docs/TOKENS.md and `pnpm check:control-sizing`."},{name:"--chat-composer-gap",value:"var(--space-2)",description:"Gap between the header / draft row / footer bands."},{name:"--chat-composer-padding-block",value:"var(--space-2)",description:"Inset of the composer frame. The draft box itself is borderless \u2014 the frame IS the boundary, so two nested rounded borders never appear."},{name:"--chat-composer-padding-inline",value:"var(--space-2)",description:"ChatComposer component tokens \u2014 the message input of a conversation (Ant Design X `Sender`). The composer is a CONTROL, so its box height is not its own decision: both bounds below are expressed in the `--control-height` tier, which is density-aware. A resting one-line composer therefore lines up with the Button beside it, and every size step (`data-size`) moves both bounds together. Never restate either as a literal length \u2014 see docs/TOKENS.md and `pnpm check:control-sizing`."},{name:"--chat-composer-row-gap",value:"var(--space-2)",description:"Gap between the prefix slot, the draft box and the trailing actions."},{name:"--chat-composer-radius",value:"initial",description:"Corner shape \u2014 `initial` so the control default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root). Default = var(--control-radius)."},{name:"--chat-composer-header-border",value:"initial",description:"Divider under the `header` slot \u2014 `initial`, documented default = 1px solid hsl(var(--border)), so a service retunes the chrome once instead of per composer."},{name:"--chat-composer-footer-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:'Type scale of the footer hint line (a token counter, a "Shift+Enter for a new line" hint).'},{name:"--control-height-compact",value:"var(--band-height-sm)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-default",value:"var(--band-height-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-comfortable",value:"var(--band-height-xl)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-padding-x-compact",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-padding-x-default",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-padding-x-comfortable",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-bounded-width",value:"min(15rem, 48vw)",description:'Held width for `width="bounded"` controls (gh#375). `min()` so the value is a ceiling on a desktop bar and a share of the viewport on a phone, never a fixed rem that overflows it.'},{name:"--control-height",value:"calc(var(--control-height-default) * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-sm",value:"calc(var(--control-height) - calc(0.25rem * var(--scaling)))",description:"Adjacent control sizes, derived from the active --control-height. The \xB1step is scaled too so the whole control ladder stays proportional under --scaling."},{name:"--control-height-lg",value:"calc(var(--control-height) + calc(0.25rem * var(--scaling)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-xs",value:"calc(var(--control-height) - calc(0.5rem * var(--scaling)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-padding-x",value:"var(--control-padding-x-default)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-gap",value:"var(--space-inline-sm)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-gap-sm",value:"var(--space-inline-xs)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-radius",value:"var(--radius)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-radius",value:"var(--radius-md, calc(var(--radius) / var(--radius-ratio)))",description:"Button corner radius \u2014 defaults to the button's historical `rounded-md` so nothing changes by default, but is its OWN knob so a service theme can retune the button radius INDEPENDENTLY of input/control radius (issue #124). The `var(--radius-md, \u2026)` fallback is gh#888, NOT the same fix as this token's own freeze: Button reads this value through `rounded-[var(--button-radius)]`, a Tailwind utility (`@layer utilities`) that this package cannot give a fallback to from CSS \u2014 so this knob is deliberately NOT flipped to `initial` (that would still be unreachable from a scoped theme, gh#824 measured `--control-radius: 37px` on `:root` moving 0 buttons). What DOES need the fallback is the read of `--radius-md` itself: gh#888 unfreezes the \u03C6 tier globally, so without this fallback `--radius-md` resolves to nothing and `--button-radius` \u2014 and therefore every Button's corner \u2014 would go to 0. The formula keeps this declaration byte-identical to before gh#888 (still frozen at :root against --radius, same historical limitation)."},{name:"--button-default-background",value:"initial",description:"THE BUTTON'S OWN SURFACE \u2014 one knob per painted variant (gh#880, standard \xA71). Every variant painted a bare role (`hsl(var(--primary))`, `hsl(var(--background))`, `hsl(var(--secondary))`, `hsl(var(--destructive))`) with no knob of its own, so the only way to retint a button was to retint the ROLE \u2014 and `--primary` is also the link ink, the focus mark and a chart series. There was no way to say \"this button is translucent\" without saying it about eight other things. WHY BUTTONS AT ALL. namethatui's source draws the line this library needed: glassmorphism is a decorative skin for ANY surface including controls, while Apple's Liquid Glass reserves glass for the floating control layer above opaque content. A glass page with a solid primary button on it is the Liquid Glass split applied backwards. FOUR FILLS, NOT SIX. `ghost` and `link` paint no resting surface, so they have nothing to knob. The HOVER fills are deliberately not knobs either: they already resolve from roles at their own call sites (`--primary-hover`, `--accent`, `--secondary`), so a theme reaches them today \u2014 the documented consequence being that a glass RESTING fill with an untouched hover gives a button that turns opaque under the pointer, and a theme that wants glass on both moves the role too. ONE BLUR FOR THE WHOLE COMPONENT, because the material is one decision per component and the variants are one component. `initial`, so unset there is no blur and no backdrop root. default = hsl(var(--primary)) at the call site"},{name:"--button-destructive-background",value:"initial",description:"default = hsl(var(--destructive)) at the call site"},{name:"--button-outline-background",value:"initial",description:"default = hsl(var(--background)) at the call site"},{name:"--button-outline-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--button-outline-border-color",value:"initial",description:"default = hsl(var(--input)) at the call site"},{name:"--button-secondary-background",value:"initial",description:"default = hsl(var(--secondary)) at the call site"},{name:"--button-secondary-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--button-link-foreground",value:"initial",description:"THE ONE BUTTON KNOB THAT IS INK, NOT A FILL (gh#884) \u2014 the `link` variant's text colour. The others above are backgrounds, so their contrast is owned by the label token that rides on them; this one IS the label, over a surface the library does not control. `--primary` is only ever guaranteed against `--primary-foreground`, so a light seed or a translucent panel makes the default illegible (measured 1.43:1 at `#FFD400`, 1.10:1 on glass) and the service sets this. default = hsl(var(--primary)) at the call site"},{name:"--button-backdrop-blur-size",value:"initial",description:"default = none \u2014 a button blurs nothing"},{name:"--control-font-size",value:"var(--font-size-base)",description:"Control surface knobs \u2014 font-size, border width and resting shadow of every `.ui-control` (input / picker trigger). Tokenised so a service theme tunes them once instead of each component hard-coding Tailwind utilities. Defaults preserve the historical look (font-size-base, 1px border, shadow-xs)."},{name:"--control-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--control-shadow",value:"var(--shadow-xs)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-icon-size",value:"calc(var(--icon-size-md) * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-icon-size-sm",value:"calc(var(--icon-size-sm) * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-status-warning-border-color",value:"var(--warning)",description:"VALIDATION STATUS \u2014 antd's `status` axis (docs/DESIGN-AUTHORITY.md names Ant Design the taxonomy authority). Only the FOCUS half is a knob: the boundary itself has to be painted from a Tailwind utility, because `border-input` sits in a later cascade layer than this file's component rules and would win over any of them (measured in Chromium \u2014 see components/data-entry/control-appearance.ts). The error boundary therefore reuses the role `aria-invalid:border-destructive` already paints, and cannot drift into a second red. The warning halo borrows the ERROR halo's alpha rather than inventing a second opacity: antd derives both from one `colorXxxOutline` recipe and the generated file carries only the error one (scripts/gen-antd-tokens.mjs)."},{name:"--control-status-warning-glow-color",value:"var(--warning)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-status-warning-glow-alpha",value:"var(--control-outline-error-alpha)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--number-input-touch-height",value:"var(--band-height-2xl)",description:"THE BAND A NumberInput TAKES ON A COARSE POINTER, and the one control in this package that needs a taller one than rule #24's 44px floor. Its two steppers are STACKED inside the field, so each can only ever be half the band. Measured in Chromium (Playwright touch emulation, `(pointer: coarse)` matching) before this token: the default NumberInput was 44px and each stepper **24\xD719px**, with their centres 20px apart. WCAG 2.2 SC 2.5.8 wants 24\xD724, and the Spacing exception does not rescue it either \u2014 that needs 24px-diameter circles centred on each box NOT to intersect, and at 20px apart they do. 44px cannot be made to work: half of it is 22px whatever the inset and gap. 48px can, exactly \u2014 two 24px halves, no inset, no gap \u2014 so the band moves up one step for this control alone, and only where a coarse pointer says it matters. `size=\"lg\"` already lands on 48px there, so it gains the same 24\xD724 for free; `xs` and `sm` stay where the consumer put them (a deliberately smaller control is the consumer's trade, the same way rule #24 already treats them). A service that wants the 44px row back sets this to `var(--band-height-xl)` and takes 22px targets with it."},{name:"--control-variant-filled-background",value:"var(--muted)",description:"CHROME VARIANT \u2014 antd's `variant` axis. `outlined` needs no token: it is what a field already draws. `filled` swaps the boundary for a tinted surface; `borderless` drops both. Kept as knobs so a service theme can retune the dense-form treatment once, globally."},{name:"--control-variant-filled-hover-background",value:"initial",description:"default = var(--accent), resolved at the call site (the freeze rule)"},{name:"--control-variant-filled-hover-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--control-count-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Character counter \u2014 antd `count`. Quiet by default; loud only once the ceiling is passed."},{name:"--control-count-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--control-count-exceeded-color",value:"initial",description:"`initial`, not `var(--text-error)`: a binding here computes ONCE at `:root`, so a `[data-tenant]` re-theming the error ink would keep this counter on the root's answer (docs/TOKENS.md, the freeze rule). The default lives at the rule that paints it."},{name:"--control-count-space-inline",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-count-inset-block-end",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-count-inset-inline-end",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--input-addon-background",value:"var(--muted)",description:"antd `addonBefore` / `addonAfter` \u2014 a segment welded outside the field's own box."},{name:"--input-addon-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--input-addon-padding-inline",value:"var(--control-padding-x)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-content-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Switch `checkedChildren` / `unCheckedChildren` and `loading`."},{name:"--switch-content-space-inline",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-spinner-size",value:"calc(var(--switch-thumb-size) - var(--space-1))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-mark-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Slider marks / dots / value bubble \u2014 antd `marks`, `dots`, `tooltip`."},{name:"--slider-mark-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--slider-mark-space-block-start",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-dot-size",value:"var(--slider-track-height)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-dot-background",value:"var(--background)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-dot-border-color",value:"var(--border)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-dot-active-border-color",value:"initial",description:"default = var(--primary), resolved at the call site"},{name:"--slider-tooltip-background",value:"var(--popover)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-tooltip-color",value:"var(--popover-foreground)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-tooltip-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-tooltip-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--slider-tooltip-padding-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-tooltip-offset-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-button-background",value:"var(--background)",description:'Radio `optionType="button"` \u2014 antd\'s welded radio bar.'},{name:"--choice-button-color",value:"initial",description:"default = var(--foreground), resolved at the call site (gh#906)"},{name:"--choice-button-border-color",value:"var(--input)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-button-selected-color",value:"initial",description:"The four brand-coloured knobs default at the call site \u2014 a `:root` binding would freeze on the root's primary and ignore a scoped [data-tenant] re-theme (docs/TOKENS.md, the freeze rule). default = var(--primary)"},{name:"--choice-button-selected-border-color",value:"initial",description:"default = var(--primary)"},{name:"--choice-button-selected-border-color-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--choice-button-solid-background",value:"initial",description:"default = var(--primary)"},{name:"--choice-button-solid-color",value:"initial",description:"default = var(--primary-foreground)"},{name:"--toggle-focus-ring-width",value:"initial",description:'Ring knobs for the two controls that historically wanted a softer mark than the global default \u2014 both are filled surfaces where the ring was felt to read as a second border. THE ALPHA IS 1, AND THAT IS THE CRITERION TALKING. WCAG 2.2 SC 1.4.11 asks for \u22653:1 between the focused and unfocused states of the pixels that mark focus, and colour is the whole of that bar. Measured against this palette, the focus hue at alpha 0.35 composites to 1.64:1 against the page (0.45 \u2192 \u22481.90); nothing in that band is a compliant indicator, so "softer" was buying taste at the cost of the criterion. The softening now comes from the HALO (`--focus-ring-glow-*`), which sits outside the opaque stop and is free to be as quiet as it likes because it is decoration rather than the indicator. The knobs stay \u2014 a service can still trade the criterion away deliberately \u2014 but the shipped default no longer makes that trade silently. Guarded by src/tokens/__tests__/focus-ring-contrast.test.ts. default = var(--stroke-lg), resolved at the call site (gh#906)'},{name:"--toggle-focus-ring-alpha",value:"1",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-focus-ring-width",value:"initial",description:"Mark width for a BORDERED FIELD. This knob exists because a field is the one control that already owns a boundary, so it is the one place the mark could plausibly be dropped and the recoloured border left to carry the state \u2014 which is the established treatment for a bordered field: a primary border plus a translucent halo, nothing in between. It ships at the same step as `--focus-outline-weight`, the hairline stroke, so a field and a button carry the same weight. A gate asserts the two stay equal, because this token cannot literally READ the global one without freezing at :root (docs/TOKENS.md, the freeze rule). It feeds `--focus-ring-weight`, never `--focus-ring-width`. The width is `weight \xD7 --focus-outline`, so a field's mark is still switched off with everything else \u2014 a knob that bypassed the switch would be a hole in it. If a service sets this, note the unit: the halo's spread is summed with a length in `calc()`, and CSS refuses to add a unitless number to a length \u2014 a bare `0` makes the whole box-shadow invalid at computed-value time and it resolves to NONE. Write `0px`. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--rating-focus-ring-offset",value:"2px",description:"Outline-form gaps \u2014 marks where a radius-hugging ring would touch the glyph."},{name:"--rating-star-filled-color",value:"initial",description:"Star paint (gh#694). HSL components, `initial` so the default resolves at the star \u2014 a `:root` binding would freeze on the root's role and ignore a scoped [data-tenant] theme (the freeze rule). Filled default = var(--warning); empty default = var(--muted-foreground) at the alpha."},{name:"--rating-star-empty-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--rating-star-empty-alpha",value:"0.45",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--checkbox-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--checkbox-size",value:"calc(1rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--checkbox-size-compact",value:"0.875rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--checkbox-size-comfortable",value:"1.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-gap",value:"var(--space-inline-sm)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-group-gap-x",value:"var(--space-6)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-group-gap-y",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-description-gap",value:"0.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-control-offset",value:"0.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-width",value:"calc(2.25rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-width-compact",value:"2rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-width-comfortable",value:"2.5rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-height",value:"calc(1.25rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-height-compact",value:"1.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-height-comfortable",value:"1.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-size",value:"calc(1rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-size-compact",value:"0.875rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-size-comfortable",value:"1.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-translate",value:"calc(1rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-translate-compact",value:"0.875rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-translate-comfortable",value:"1.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-track-height",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-thumb-size",value:"1rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-vertical-min-block-size",value:"10rem",description:"A vertical slider fills its container's block size; this keeps one visible in a container that has none (antd leaves it at 0 and relies on the page to size it)."},{name:"--otp-slot-size",value:"initial",description:'InputOTP slot box (gh#233). Its own knob so an auth surface can widen the 6-slot challenge row to fill a wide panel WITHOUT re-scoping --control-height (which would resize every other control in the same card). Declared `initial` \u2014 the tier-mirror form of the role-mirror rule in docs/TOKENS.md: the default must resolve at the CALL SITE (`var(--otp-slot-size, var(--control-height))`), because `--otp-slot-size: var(--control-height)` here would FREEZE at the :root tier (32px) and an OTP row inside `.ui-auth-shell[data-variant="canonical"]`, which re-scopes --control-height to 36px, would silently shrink. Verified in Chromium: 36px before and after. A service opts in with a NAMED tier (`var(--control-height-lg)`), never a calc. default = var(--control-height) at the call site'},{name:"--otp-slot-inline-size",value:"initial",description:'Per-AXIS overrides of the slot box (gh#12). --otp-slot-size stays the square shorthand; these two win over it when set, so a code field can be WIDER-than-tall or TALLER-than-wide without abandoning the token. A canonical device-grant code field is 27.5x52 per slot (a 4-slot `appearance="grouped"` box of 112x54 with its 1px group border) \u2014 not expressible with one square knob, which is why grouped OTP measured 146x38 against that artboard. `initial` for the same tier-mirror reason as --otp-slot-size: the whole fallback chain (axis \u2192 square \u2192 --control-height) must resolve at the CALL SITE so a shell that re-scopes --control-height still reaches an OTP row that sets neither axis. default = var(--otp-slot-size, var(--control-height))'},{name:"--otp-slot-block-size",value:"initial",description:"default = var(--otp-slot-size, var(--control-height))"},{name:"--otp-container-align",value:"flex-start",description:'Main-axis alignment of the whole OTP row (rule #44/#45 \u2014 chrome is a token, default quiet). `flex-start` is the historical behaviour, so an existing field is byte-identical; a centred code field is `align="center"` on InputOTP (which wins over this knob) or this token set once in a service theme. It exists because EVERY consumer was wrapping .ui-otp-container in a flex-centring div to get a centred challenge.'},{name:"--checkbox-checked-background",value:"initial",description:'Checked/on/active fills \u2014 `initial` so the --primary default re-resolves at the call site under a scoped theme (a :root binding to var(--primary) freezes at the :root value and a scoped [data-tenant] override of --primary never reaches it). A service retints the "selected" state by overriding these directly. Defaults = hsl(var(--primary)) \xB7 slider track 0.2\u03B1.'},{name:"--switch-checked-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--toggle-on-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-track-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-range-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-unchecked-background",value:"initial",description:'Switch OFF track fill (gh#315) \u2014 `initial`, default hsl(var(--input)). Its own knob so a service can quieten the off-track without dragging the --input control-boundary role back below the WCAG SC 1.4.11 floor (rule #45); whatever you set still owes 3:1 against the page and against the thumb (--background), or "off" stops being a visible state.'},{name:"--switch-unchecked-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--switch-content-unchecked-foreground",value:"initial",description:"A labelled OFF track defaults to muted-foreground rather than the input boundary role: text needs 4.5:1, not the 3:1 required of an empty track. Pair custom track fills with this foreground; the default background role contrasts in both light and dark themes."},{name:"--color-picker-input-width",value:"6.5rem",description:"ColorPicker \u2014 width of the hex text field beside the swatch."},{name:"--color-picker-preset-size",value:"var(--touch-target-min)",description:"ColorPicker `presets` (gh#1055). The swatch box IS the radio's pointer target, so it sits on the WCAG 2.2 SC 2.5.8 floor (antd's own preset block is 24px too) and never rides --scaling below it. The gap leaves room for the checked ring, which is drawn outside the box."},{name:"--color-picker-preset-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--color-picker-presets-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-list-max-height",value:"min(300px, 50vh)",description:"Command / CommandPalette \u2014 list height, inner paddings and the palette's own box."},{name:"--command-input-padding-x",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-group-padding",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-item-padding-y",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-item-padding-x",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-item-gap",value:"var(--control-gap)",description:"The gap between a row's leading mark and its label. `.ui-command-item` is a flex row and had NO gap at all, so every command/palette/picker row with an icon rendered its glyph flush against the text \u2014 measured at 0px between an organization mark and its name. It reads --control-gap because a command row is a control row: the same distance the trigger it opened from already puts between its own icon and label."},{name:"--command-list-split-padding",value:"0",description:"`Command split` (antd List `split`, gh#699) \u2014 a list drawn as ONE ruled box. --command-list-split-padding the group/list padding under split: 0, so no inner frame separates the rows from the panel edge. --command-list-split-inset the inline inset the SURFACE puts between the panel edge and the list, which a split row cancels (negative margin) and pays back as padding so its fill and rule still meet both edges. 0 for a bare Command; OrgSwitcher sets its column inset. --command-item-divider-width the hairline between rows. --command-item-divider-color ROLE-MIRROR KNOB \u2014 `initial` here, default resolved at the call site = var(--border) (HSL channels; docs/TOKENS.md)."},{name:"--command-list-split-inset",value:"0px",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-item-divider-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--command-item-divider-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-width",value:"35rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-inset-top",value:"calc(var(--space-6) * 4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-viewport-inset",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-hint-padding-y",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-hint-padding-x",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-hint-gap",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-input-edge-inset",value:"var(--space-3)",description:"SearchInput \u2014 the inset the leading/trailing icons sit at, and the field padding derived from it so the text never runs under an icon."},{name:"--search-input-start-padding",value:"calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-input-end-padding",value:"calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"The --font-size-xs tier, spelled once per control that reads it, so a service can retune a single one of them without moving the whole scale."},{name:"--color-picker-hex-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--color-picker-presets-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-group-heading-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-input-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tag-input-chip-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--toggle-sm-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--toggle-xs-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-sm-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-affix-inset-inline-end",value:"var(--space-2)",description:"TRAILING AFFIX \u2014 the clear \u2715 / chevron overlay a select-family trigger parks at its inline end. Select, SearchSelect and TagInput each hard-coded the same `end-2 size-6 rounded-sm opacity-50` stack independently (#319), so a service retuning affix weight had to chase the literal through several components. One shared set of knobs instead \u2014 this is a CONTROL-level concern, not a per-component one."},{name:"--control-affix-action-size",value:"1.5rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-affix-action-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--control-affix-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-affix-rest-alpha",value:"0.5",description:"Resting weight of an affix glyph \u2014 it must read as secondary until hovered/focused."},{name:"--control-trigger-space-inline-end",value:"2.25rem",description:"2.25rem \u2014 the room a single trailing affix needs. Written as a raw rem because the literal it replaced (`pe-9`) is a flat Tailwind step, not a density-scaled one."},{name:"--control-inline-affix-size",value:"1.25rem",description:"INSIDE-FIELD AFFIX \u2014 the leading/trailing controls Input and TimePicker render WITHIN the field box, as opposed to the overlay affix (--control-affix-*) that Select and SearchSelect park on top of a trigger. Both carried the identical literal stack (#319). Because these sit on the field's own surface rather than over it, they rest a touch heavier than the overlay pair \u2014 that difference is the reason the two sets stay separate."},{name:"--control-inline-affix-icon-size",value:"var(--control-affix-icon-size)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-inline-affix-space-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-inline-affix-inset-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-inline-affix-rest-alpha",value:"0.7",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-inline-affix-space-inline-end",value:"2.25rem",description:"Inline room the field reserves so its text never runs under a single affix."},{name:"--textarea-clear-inset-block-start",value:"var(--space-2)",description:"Input centres its affix on the field's single line; a textarea has no single line to centre on, so its clear control parks at the top-end corner instead."},{name:"--control-multiline-padding-block",value:"var(--space-2)",description:"MULTILINE BOX \u2014 the block padding of `.ui-control-multiline` (Textarea). It was a bare `--space-2` inside the padding shorthand, which made it unreachable for a service that runs a denser composer, AND it is the constant the auto-grow row maths has to add back, so the two had to read the same knob or drift (#45)."},{name:"--textarea-autogrow-line-height",value:"initial",description:'The unit a "row" is measured in. `initial` on purpose: the call site reads `var(--textarea-autogrow-line-height, var(--line-height-normal))`, so a service that retunes the multiline line-height for CJK legibility retunes the ceiling with it (#46). Unitless \u2014 it is multiplied by `--control-font-size`.'},{name:"--textarea-autogrow-min-height-rows",value:"1",description:"Floor of the grown box, in text rows. The `minRows` prop overrides per instance \u2014 the same theme-global / prop-local priority as `--form-label-width` vs `labelWidth`. The floor is additionally clamped up to `--control-height` so a resting one-row composer still lines up with the Input / Button beside it instead of undercutting the control tier."},{name:"--textarea-autogrow-max-height-rows",value:"8",description:"Ceiling of the grown box, in text rows; past it the control scrolls internally instead of pushing the page. `maxRows={0}` sets this to `infinity` for an unbounded box."},{name:"--textarea-autogrow-box-inset",value:"calc( (var(--control-multiline-padding-block) + var(--control-border-width, var(--stroke-hairline))) * 2 )",description:"The non-text part of the box the row maths must add back: block padding + border, both edges. `.ui-textarea-autogrow--ghost` re-declares it without the border, because the ghost variant drops its own chrome."},{name:"--control-composite-field-space-gap",value:"var(--space-2)",description:"COMPOSITE FIELD \u2014 the bordered box that wraps two inputs plus a separator (date/month range pickers) or one input plus affixes. Shared so the four range/picker fields cannot drift into four slightly different boxes."},{name:"--input-file-button-height",value:"var(--band-height-sm)",description:"The <input type=file> button is a browser-owned box we restyle; it sits one tier below the field so it reads as a control INSIDE the control."},{name:"--input-file-button-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-panel-max-width",value:"32rem",description:"SEARCH-SELECT \u2014 the Popover+Command combobox. Its panel geometry was baked onto the component as arbitrary values (`max-w-[min(32rem,calc(100vw-1.5rem))]`), so a service could not widen the panel or change the viewport gutter without forking."},{name:"--search-select-panel-inline-size",value:"auto",description:"Seat for a NUMERIC `popupMatchSelectWidth`. `auto` is the inert default \u2014 the knob only does anything once a call site sets it, and then the value is that consumer's own measurement."},{name:"--search-select-panel-viewport-inset",value:"var(--space-6)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-list-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-list-max-height",value:"none",description:"antd `listHeight` writes this per instance; `none` lets the panel's own available height win."},{name:"--search-select-footer-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-option-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-option-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-option-sublabel-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-status-space-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-status-space-block",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-placeholder-space-block",value:"var(--space-6)",description:"Empty/error states sit alone in the panel, so they get a taller, centred block."},{name:"--search-select-status-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-spinner-size",value:"1rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-column-min-width",value:"9rem",description:"CASCADER \u2014 column browser + flat search list. Its option rows, column widths and panel paddings were literals on the component (#319), so a service could not widen a column to fit longer JA labels or tighten the row rhythm without forking."},{name:"--cascader-columns-max-height",value:"min(280px, 50vh)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-list-max-height",value:"min(300px, 50vh)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-panel-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-space-inline",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-space-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-space-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-result-space-inline",value:"var(--space-2)",description:"The flat search result row is denser than a column row \u2014 it has no chevron to balance."},{name:"--cascader-result-space-block",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-result-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--cascader-result-icon-space-inline-end",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-empty-space-block",value:"var(--space-6)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--select-content-max-height",value:"24rem",description:"SELECT \u2014 the Radix listbox surface. Its popup shares the menu row rhythm (--menu-item-*), so only what is genuinely its own lives here (#319)."},{name:"--select-content-inline-size",value:"auto",description:"Seat for a NUMERIC `popupMatchSelectWidth` on the plain listbox. `auto` is the inert default."},{name:"--select-content-background",value:"initial",description:"THE LISTBOX SURFACE \u2014 and it is deliberately NOT the trigger's (gh#880, docs/GLASSMORPHISM-STANDARD.md \xA74b). Select is two problems: the TRIGGER is a form field and takes `--control-surface-background` with every other field, while the LISTBOX is an overlay that opens over arbitrary page content and needs the most opaque fill in the system \u2014 a 7-line menu over a photograph is unreadable at a card's alpha. One knob for both would make the correct answer for one the wrong answer for the other. `initial` with the role default at the call site, the same shape `--popover-surface-background` uses; the listbox painted a bare `hsl(var(--popover))` with no knob at all until now. default = hsl(var(--popover)) at the call site"},{name:"--select-content-backdrop-blur-size",value:"initial",description:"default = none \u2014 the listbox blurs nothing"},{name:"--select-empty-space-block",value:"var(--search-select-placeholder-space-block)",description:"Vertical room around the `notFoundContent` row \u2014 the same breathing space the SearchSelect panel gives its own empty state, so the two empties read as one affordance."},{name:"--select-scroll-button-space-block",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--select-item-space-inline",value:"0.625rem",description:"Select rows sit slightly wider than a menu row: a listbox has no leading icon column to absorb the optical inset, so 2.5 reads level with a menu's 2 + icon."},{name:"--time-picker-column-height",value:"13rem",description:"TIME PICKER \u2014 scroll columns of hour/minute/second plus an inline affix pair. All of its geometry was literal on the component (#319): a service could not shorten the column, widen the panel for a 12-hour layout, or retune the row rhythm without forking."},{name:"--time-picker-panel-width",value:"9rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-panel-width-12h",value:"13rem",description:"12-hour mode adds an AM/PM column, so the panel is wider."},{name:"--time-picker-heading-space-inline",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-heading-space-block",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-heading-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-column-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-option-space-block",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-option-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--time-picker-option-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-footer-space-inset",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-footer-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-affix-space-gap",value:"var(--control-inline-affix-space-gap)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-list-max-height",value:"min(300px, 50vh)",description:"TREE SELECT \u2014 a Select whose panel holds a tree. Its rows, indent and toggle were literal on the component, and the depth indent was a magic expression in JSX (`depth * 1.25 + 0.5` rem) that no theme could reach at all (#319)."},{name:"--tree-select-row-space-block",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-row-space-inline-end",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-row-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--tree-select-row-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-depth-space-base",value:"var(--space-2)",description:"Indent = base + depth \xD7 step. A denser service dials the step down without touching JSX."},{name:"--tree-select-depth-space-step",value:"1.25rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-toggle-size",value:"1.25rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-toggle-space-inline-end",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-label-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-empty-space-block",value:"var(--space-6)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-space-inset",value:"var(--space-3)",description:"CALENDAR \u2014 the react-day-picker grid. Day/weekday cells already size from --control-height (the system control tier), but the frame around them \u2014 root inset, month gaps, nav offset, grid rhythm \u2014 was literal on the component (#319), so a service could not tighten the calendar to its own density without forking the classNames map."},{name:"--calendar-month-space-gap",value:"var(--space-4)",description:"Gap BETWEEN side-by-side months (a range picker's two panels) \u2014 not the caption\u2192grid step. Until gh#730 `.ui-calendar-month` carried it too, and a month has exactly two children, so it stacked with --calendar-grid-space-block-start into one 32px void under \u300C2026\u5E749\u6708\u300D that a screenshot read as a missing week row. One gap, one token: the month column no longer sets a gap and --calendar-grid-space-block-start is the whole caption\u2192weekday step."},{name:"--calendar-caption-space-inline",value:"var(--space-8)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-caption-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-nav-space-block-start",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-nav-space-inline",value:"var(--calendar-space-inset)",description:"THE SAME INSET AS THE GRID, by construction rather than by coincidence (gh#730 item 5). `.ui-calendar-nav` is `position: absolute; inset-inline: 0`, and an absolutely positioned box resolves its insets against the PADDING box \u2014 so the nav escapes the calendar's own --calendar-space-inset and its padding is the whole inset the chevrons get. At space-1 the `\u2039` button's outer edge measured 4px from the popover content edge while the weekday row and every day column started at 12px: an 8px split, reported as \u300Cl\u1EC1 c\u1EE7a button v\xE0 calendar ko b\u1EB1ng nhau\u300D. Pointing this at --calendar-space-inset makes the two ONE value \u2014 retuning the calendar's inset moves the chevrons with the grid, in LTR and RTL alike."},{name:"--calendar-nav-rest-alpha",value:"0.7",description:"Nav chevrons read as secondary until hovered \u2014 they frame the month, they are not the point."},{name:"--calendar-grid-space-block-start",value:"var(--space-3)",description:"THE caption\u2192weekday-row step, the only one now (gh#730): measured 32px before, 12px after. space-3 rather than space-2 because the unruled grid's own row rhythm is --calendar-week-space-block-start (space-2, 8px) \u2014 at 8px the caption would read as one more week row, at 12px it still reads as the boundary of a group."},{name:"--calendar-week-space-block-start",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-weekday-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-weekday-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--calendar-day-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-day-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--calendar-chevron-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-footer-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-footer-space-block-start",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-footer-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--calendar-bordered-weekday-padding-block",value:"var(--space-1)",description:"Block inset of a header cell once the grid is RULED. Unruled, the header row has no edge for its text to sit against, so it needs none; ruled, the line box started right at the 1px rule \u2014 measured 1px from the top border and 2.19px from the bottom, an inset below the smallest named step. The smallest step, not a literal, so a service retuning the spacing grid moves it too."},{name:"--calendar-grid-border-color",value:"initial",description:"Colour of the day-grid ruling (`Calendar bordered`, on by default). `initial` on purpose: the role default is read at the call site as `var(--calendar-grid-border-color, hsl(var(--border)))` so it follows a scoped theme. The --border tier: L* 93.80 / 1.149:1 on the popover in light, L* 20.76 / 1.270:1 in dark \u2014 a rule exactly as heavy as a Card edge or a DataTable row rule. Asked for three times: 25.3.0 drew the grid at all, 27.6.0 lightened the full --input (3.47 / 3.88) to --input/0.5 (1.74 / 1.95, L* 78.67), and gh#730 measured that still darker than the --border every card and table uses and asked for the --border tier itself. Same tier as the RangeTimeline grid. Set any colour to retint, e.g. `hsl(var(--input) / 0.5)` for the 27.6.0 weight or `hsl(var(--input))` for the heavy line."},{name:"--transfer-pane-min-height",value:"14rem",description:"TRANSFER \u2014 the two-pane list mover. Pane height, header rhythm and row density were literal on the component (#319), so a service could not fit the panes to its own page grid or tighten the row for a dense admin table without forking."},{name:"--transfer-pane-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--transfer-panes-space-gap",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-header-space-inline",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-header-space-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-header-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-header-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-search-space-inset",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-list-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-space-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-space-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--transfer-row-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-check-space-block-start",value:"0.125rem",description:"The checkbox is top-aligned against a two-line row, so it needs a hair of optical offset to sit level with the first line's cap height rather than its box."},{name:"--transfer-row-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-empty-space-block",value:"var(--space-8)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-actions-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-action-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-panel-space-inset",value:"var(--space-3)",description:"PERIOD GRID \u2014 the year-nav header over a 3-column grid that DatePicker shows for a coarse `picker` (month / quarter / year), single or `range`. The `--month-picker-*` names date from when this panel lived in a separate MonthPicker; one set of knobs has always driven every copy of it, which is why merging the four pickers changed no measurement here."},{name:"--month-picker-grid-space-block-start",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-grid-space-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-cell-space-inline",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-nav-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-nav-rest-alpha",value:"var(--calendar-nav-rest-alpha)",description:"Year-nav chevrons read as secondary until hovered \u2014 same treatment as the Calendar nav, so the two panels stay visually consistent when either is retuned."},{name:"--month-picker-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-separator-icon-size",value:"var(--icon-size-sm)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-xs-height",value:"initial",description:'`initial`, NOT `var(--control-height-xs)`: an alias of a ladder step declared here is substituted against :root\'s 24px and inherits frozen, so a scope that moves the ladder (a `MobileShell` scopes it to 44 / 40 / 48 / 36px) never reached it \u2014 measured, `size="xs"` stayed 24px inside the shell while every other size moved. `.ui-button--xs` reads it with the live ladder step as fallback, so the default re-resolves at the button and an override still wins.'},{name:"--button-bare-target-size",value:"initial",description:"Minimum TARGET of `variant=\"bare\"` (gh#404) \u2014 the pseudo-element hit area, not a box height, so it never shows up as geometry. The measure is the same xs tier the note above settled on as this package's WCAG 2.2 SC 2.5.8 floor (1.5rem = 24px), and it moves with that tier and with density. `initial`, NOT `var(--control-height-xs)`, for the reason `--button-xs-height` above carries: an alias of a ladder step written HERE is substituted against :root's value and inherits frozen, so a scope that moves the ladder never reaches it. Measured in Chromium at 393px inside `MobileShell`, which scopes `--control-height` to 2.75rem: `--control-height-xs` correctly re-resolved to 36px while the bare button's `::after` stayed **24\xD724** \u2014 the one touch target in a touch-first shell that did not move. `.ui-button--bare::after` reads the live step as its fallback, so the default re-resolves at the button and a service override still wins."},{name:"--button-xs-space-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-xs-space-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-xs-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-xs-icon-size",value:"var(--icon-size-xs)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-icon-space-inline-md",value:"var(--space-3)",description:"Icon-adjacent padding: a button whose only child is an icon needs less inline room than one carrying a label, or the glyph floats in a too-wide box. One knob per size tier."},{name:"--button-icon-space-inline-sm",value:"0.625rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-icon-space-inline-lg",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-icon-space-inline-xs",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-space-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--otp-caret-block-size",value:"1rem",description:`The OTP blinking caret. The ratchet catches it because the selector says "caret", but it is a text CURSOR, not a chevron: a 1px bar as tall as the digit's line box. Its width belongs to the stroke scale; its height belongs to neither the icon nor the band scale, so it is declared rather than forced onto one. scale-exempt: text-caret height, tracks the OTP digit's line box, not an icon or a band`},{name:"--otp-caret-inline-size",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--otp-separator-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-min-width",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-space-inline",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-background",value:"initial",description:"Count pill \xB7 COLOUR (gh#320). The pill used to tint itself translucently over whatever the button's surface happened to be (`bg-primary-foreground/15`, `bg-foreground/8`), which means its contrast was a FUNCTION of that surface \u2014 and five of those combinations measured below the 4.5:1 that WCAG 2.2 SC 1.4.3 requires of small text: default (light) 3.88 \xB7 destructive (dark) 4.29 outline family (light, at rest) 4.32 \xB7 outline family (light, hover) 3.64 outline family (dark, hover) 3.68 The hover rows are the reason a static sweep never caught this: `--accent` only appears under the cursor, so no screenshot of a resting page contains the failing state. Same shape as gh#299 and gh#315 \u2014 a value that passes on the surface someone happened to check. The fix is the one gh#312 already validated on Toggle: OPAQUE role fills, which make the pill's contrast independent of the button's variant AND of hover. Each filled variant uses its own label pair SWAPPED, so the pill is exactly as legible as the label beside it and cannot be less legible under any theme that keeps that button readable at all: default --primary on --primary-foreground 5.04 light \xB7 7.07 dark destructive --destructive on --destructive-foreground 6.10 light \xB7 5.53 dark secondary --secondary on --secondary-foreground 14.25 light \xB7 12.40 dark outline family --foreground on --muted 14.25 light \xB7 12.40 dark The outline family's `--muted` fill is 1.09:1 against the button's own ground, so at rest the counter still reads as quiet text rather than a badge (#44) \u2014 it is legibility of the DIGITS that went up, not loudness of the pill. All eight are role-mirror knobs: `initial` at :root with the role default at the CALL SITE, so a scoped [data-tenant]/.dark override of the role still reaches them (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--button-count-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-default-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-default-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-destructive-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-destructive-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-secondary-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-secondary-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-label-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"LABEL \u2014 the Label primitive's own box and type (#319). Every one of these was a Tailwind literal baked into label.tsx (`text-sm leading-none flex items-center gap-2`), so a service whose form grid wanted a smaller/denser label had to hand-write font-size on every call site (which is exactly why --form-label-font-size had to be invented as a per-instance escape). They live under the `control` prefix because Label is a control-family primitive and src/tokens/components/ has no `label` file of its own. Defaults reproduce today's rendering exactly: font-size \u2190 `text-sm` \u2192 --text-sm \u2192 var(--font-size-sm) line-height \u2190 `leading-none` \u2192 1 (leading-none beats text-sm's companion line-height)"},{name:"--control-label-line-height",value:"var(--line-height-normal)",description:"A LABEL WRAPS, so its line box cannot be 1. This was a literal `1`, which is right for the one case it was chosen for \u2014 a single-line label beside a checkbox, where a cap-height box aligns cleanly \u2014 and wrong for every other. The moment the text takes two lines they collide: measured on the hosted sign-up consent label at 520px, font-size 14px with line-height 14px produced a 28px box of two touching lines. Long copy, a narrow column, and ja/vi wrapping all reach that case routinely. This package has already paid for this exact mistake once: `--auth-shell-divider-label-line- height` carries the note that a hardcoded `line-height: 1` rendered an 11px row and sat the lower half of the canonical Login card 8px high (gh#263). Same literal, same failure, one token over. `--line-height-normal` (1.5), not `--line-height-tight`: 1.25 clears the collision but two wrapped lines still read as one block, and a label that has wrapped IS prose at that point. 1.5 is also what this package already decided for the same job one layer up \u2014 `--auth-shell-field-label-line-height` \u2014 so the two agree instead of drifting. Alignment is unaffected: `.ui-label` is `display: flex; align-items: center`, so the control centres against the label box whatever its height."},{name:"--control-label-space-gap",value:"0.5rem",description:"Label \u2192 addon/required-marker gap. A RAW rem, deliberately NOT var(--space-2): the `gap-2` it replaces reads Tailwind's own --spacing grid, which this repo does NOT density-scale, so a --space-* default would silently resize every label row under a compact/comfortable density. A service that WANTS it to follow density points the knob at var(--space-2) itself."},{name:"--control-label-disabled-alpha",value:"0.7",description:"Weight of a label whose `peer` control is disabled. Deliberately its OWN knob rather than the global --disabled-opacity (0.5): a label must stay READABLE next to a disabled control \u2014 it is still the field's accessible name \u2014 so it rests one step heavier than the control it names. Default = the historical `peer-disabled:opacity-70`."},{name:"--control-surface-border-color",value:"initial",description:'\u2500\u2500 CONTROL SURFACE \u2014 the antd `variant` \xD7 `status` matrix (antd 6.6.2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The four surfaces and the two statuses are TOKENS, not utilities, and that is the whole point of this block. The select-family trigger used to state its surface as `border-input bg-background` \u2014 two Tailwind utilities, which live in `@layer utilities` and therefore beat anything a stylesheet in `@layer components` can say. A `[data-variant="filled"]` rule would have been dead on arrival, exactly the way `w-full` killed `.ui-app-setting-picker-icon` (gh#366) and `--control-bounded-width` (gh#375). So the family now withholds those two utilities and reads the surface from here instead; the DEFAULT values reproduce the previous rendering byte for byte. `--control-surface-*` is the `outlined` default; the other three name themselves. THE THREE THAT MIRROR A ROLE ARE `initial` (docs/TOKENS.md, the `:root` freeze rule), and this block is where that rule was broken. `--control-surface-background: hsl(var(--background))` SUBSTITUTES at `:root`, so it froze on the light canvas and inherited that answer into every subtree. It looks fine in product because `.dark` normally lands on `<html>`, where `:root[data-theme="dark"]` re-declares `--background` on the SAME element the binding is made on. It breaks the moment a theme is scoped BELOW `<html>` \u2014 the `[data-tenant]` route docs/CUSTOMER-THEMING.md recommends at level 3, and the `.dark` wrapper the docs Theme Editor uses to show both themes at once. Measured there before this change: a `Select` trigger in a `.dark` subtree painted `rgb(253,253,252)` under `rgb(247,247,243)` text, 1.05:1, while the `Input` beside it was correctly dark. The defaults below are unchanged; they simply resolve where the element paints instead of where the knob is declared. default = hsl(var(--input)) at the call site'},{name:"--control-surface-background",value:"initial",description:"default = hsl(var(--background)) at the call site"},{name:"--control-surface-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--control-filled-border-color",value:"transparent",description:"`filled` \u2014 antd's grey field: no edge, a muted fill, no resting elevation."},{name:"--control-filled-background",value:"initial",description:"default = hsl(var(--muted)) at the call site"},{name:"--control-filled-shadow",value:"none",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-borderless-border-color",value:"transparent",description:"`borderless` \u2014 chrome removed entirely, for a control embedded in a surface that already draws the box (a toolbar cell, an inline edit)."},{name:"--control-borderless-background",value:"transparent",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-borderless-shadow",value:"none",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-status-error-border-color",value:"hsl(var(--destructive))",description:'STATUS. `error` reuses the destructive role already wired to the focus halo through the `[aria-invalid="true"]` rule in focus-ring.css. `warning` deliberately does NOT use `--warning` (\u5C71\u5439 #f8b500). Measured against `--background` (#fdfdfb) that hue is 1.85:1 \u2014 a boundary that marks a state has to clear 3:1 under WCAG 2.2 SC 1.4.11, so shipping the brand yellow as the edge would have been a colour that only looks like a warning to people who can already see it. `--text-warning` (36 100% 28%, the darkened amber this palette keeps for exactly this reason) measures 5.4:1. A service that wants antd\'s yellow back retunes the knob and owns that trade.'},{name:"--control-status-warning-border-color",value:"initial",description:"default at the call site \u2014 freeze rule"},{name:"--control-status-warning-outline-color",value:"initial",description:'THE SAME AMBER, AS A TRIPLET \u2014 and it has to be a triplet, not a colour. The focus mark is composed as `hsl(var(--focus-outline-color) / var(--focus-ring-opacity))`, so a token that already resolves to `hsl(...)` nests one `hsl()` inside another: the declaration is then invalid at computed-value time and the WHOLE `outline` shorthand falls back to its initial value. Measured in Chromium on a focused `status="warning"` Textarea before this line existed: `outline-style: none`, `outline-width: 3px` (`medium`, the initial) \u2014 i.e. a warned field had no focus mark at all while the switch was on. It carried `--warning` (\u5C71\u5439 #f8b500) before, which is the hue the note above rejects for a state edge at 1.85:1; `--text-warning` is the darkened amber that measures 5.4:1 and is what the boundary already paints, so the edge and the mark cannot drift apart. default at the call site \u2014 freeze rule'},{name:"--control-height-compact",value:"var(--band-height-xl)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-default",value:"var(--band-height-xl)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-input-end-padding",value:"calc( var(--search-input-edge-inset) + var(--touch-target-min) / 2 + var(--band-height-xl) / 2 )",description:"SearchInput's text stops at the clear \u2715's 44px TARGET, not at its 24px box (gh#1148): edge inset + half the box (where the glyph's centre is) + half the target."},{name:"--textarea-padding-block-start",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-padding-block-end",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-padding-inline-start",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-padding-inline-end",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--conversations-gap",value:"var(--space-2)",description:"Gap between the creation button, each bucket, and each run of rows."},{name:"--conversations-list-gap",value:"var(--space-1)",description:"Gap between rows inside one run."},{name:"--conversations-item-height",value:"var(--band-height-md)",description:"ROW BOX. The row is a CONTROL, so its height is the band tier, never a literal (rule #24 and `pnpm check:control-sizing`)."},{name:"--conversations-item-gap",value:"var(--space-inline-sm)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-padding-inline",value:"var(--space-inline-sm)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--conversations-item-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-color",value:"initial",description:"ROW STATE. Role-mirror knobs (docs/TOKENS.md): `initial` so the documented default resolves at the CALL SITE and a scoped `[data-tenant]` / `.dark` override still reaches it. Bound to a value here at `:root` each one would resolve once, against the root palette, and freeze. Default resting ink = hsl(var(--muted-foreground)) Default active ground = hsl(var(--accent)) Default active ink = hsl(var(--foreground))"},{name:"--conversations-item-active-background",value:"initial",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-active-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--conversations-item-active-color",value:"initial",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-active-font-weight",value:"var(--font-weight-medium)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-icon-size",value:"var(--icon-size-md)",description:"Leading glyph inside a row."},{name:"--conversations-line-gap",value:"var(--space-stack-xs)",description:"Gap between a row's label and its timestamp. The TIGHTEST stack step, because the two lines are one thing being read, not two stacked items \u2014 anything larger and the row reads as two rows in a rail that is already narrow."},{name:"--conversations-group-gap",value:"var(--space-1)",description:'BUCKET HEADING ("\u4ECA\u65E5" / "Previous 7 days").'},{name:"--conversations-group-padding-inline",value:"var(--space-inline-sm)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-group-chevron-size",value:"var(--icon-size-sm)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-separator-space-block",value:"var(--space-1)",description:'The `{ type: "divider" }` rule between two runs.'},{name:"--accordion-chevron-size",value:"var(--icon-size-md)",description:'Accordion chevron and Carousel arrow. Both were bare 1rem literals in data-display-layout.css \u2014 glyphs with no tier-2 route, invisible to the icon ratchet because neither selector contains the word "icon".'},{name:"--carousel-arrow-icon-size",value:"var(--icon-size-md)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--carousel-arrow-size",value:"2rem",description:'THE ARROW\'S BOX, WHICH IS NOT THE SAME KNOB AS ITS GLYPH (gh#931). `--carousel-arrow-icon-size` sizes the mark INSIDE the button; the button itself was a pair of bare `2rem` literals in data-display-layout.css, so the TARGET had no tier-2 route at all. 32px clears WCAG 2.2 SC 2.5.8 (24px), which is why this is a missing knob and not a defect \u2014 but a brand whose own foundations ask for a 44px target could not reach it from a theme, and had no option left except a page-local override of a library selector. Reported from a real re-theme whose spec reads "arrows44px". The default is the same 2rem the literals painted, so no existing carousel moves. A theme that wants the larger target writes one line: `--carousel-arrow-size: 2.75rem`.'},{name:"--carousel-arrow-inset-block-start",value:"initial",description:'WHERE THE ARROWS SIT, AND THE DEFAULT IS THE MIDDLE OF THE CONTENT \u2014 NOT OF THE COMPONENT. `.ui-carousel` is the positioning context and it is as tall as the slides PLUS the dots, so a plain `50%` centres the arrows on that sum. Measured on a 98px carousel: slides 58px (middle at -3415), dots 40px, arrows landing at -3395 \u2014 exactly half the dots row too low, which is what "t\u1EA1i sao l\u1EA1i l\xE0 middle c\u1EE7a c\u1EA3 khung th\u1EBF" is pointing at. The reserve below subtracts it back. default = the content\'s middle, at the call site'},{name:"--carousel-dots-block-size",value:"0px",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--accordion-focus-ring-offset",value:"2px",description:"Outline-form ring gaps \u2014 a hugging ring would touch these marks (styles/focus-ring.css)."},{name:"--carousel-dot-focus-ring-offset",value:"2px",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"CodeBlock \u2014 a preformatted block; Prose delegates its `pre` treatment to the same knobs."},{name:"--code-block-font-size-xs",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-line-height",value:"var(--line-height-normal)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-space-inset",value:"var(--space-3)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--code-block-max-height-sm",value:"12rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-max-height-md",value:"20rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-max-height-lg",value:"32rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-foreground",value:"initial",description:"SYNTAX COLOURS (gh#784). Twelve knobs, named for Shiki's `createCssVariablesTheme` output so a highlighter's own vocabulary maps onto them one-for-one with no translation layer. WHY THE PACKAGE OWNS THESE AT ALL. `CodeBlock` is a surface and does not highlight \u2014 its own prop docs tell a consumer to bring a highlighter and pass its spans. But the consumer rules then close every route those spans could take colour from: `style` and `className` are both visual overrides, and an app stylesheet may declare no custom properties. So the documented path was unbuildable, which is a contradiction in this package's docs rather than a missing feature on the consumer's side. Every one is `initial` with its role default at the CALL SITE (docs/TOKENS.md \u2014 the `:root` freeze rule), so light and dark come from the roles rather than from a second palette here, and a service that wants its own scheme overrides the knob without touching the roles."},{name:"--code-block-token-comment-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-keyword-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-string-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-string-expression-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-function-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-constant-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-parameter-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-punctuation-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-link-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-inserted-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-deleted-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-changed-color",value:"initial",description:"`changed` is the TWELFTH name and it was missed on the first pass: gh#784's own list had eleven, I copied the list instead of the source, and shiki's theme-css-variables.ts emits twelve. It is reachable only through a CONTEXT diff (`diff -c`, `markup.changed.diff` = `^(!).*$`), which is why a unified-diff sample never produced it \u2014 a silent wrong answer rather than a missing nicety: a changed line rendered as ordinary foreground, losing the distinction the `!` marker exists to make. Reported by the consumer that tokenised all 17 grammars (gh#793)."},{name:"--prose-font-size",value:"var(--font-size-base)",description:"Prose \u2014 typography of rendered content. Heading sizes come from --heading-h1..h4, table cell measures from --table-cell-padding-*; these are the rhythm knobs."},{name:"--prose-font-size-sm",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-line-height",value:"var(--line-height-body)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-space-block",value:"var(--space-3)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-heading-space-block-start",value:"var(--space-6)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-list-space-inline",value:"var(--space-6)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-list-item-space",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-quote-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--prose-quote-space-inline",value:"var(--space-3)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-code-font-size",value:"calc(1em / var(--font-size-ratio))",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-code-space-inline",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-code-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--prose-link-color",value:"initial",description:"The link ink. `initial` \u2014 not `var(--primary)` \u2014 because the default IS a tenant-scoped role: a `:root` binding computes against the root's --primary and inherits that frozen value down, so a `[data-tenant]` re-tint never reaches it (docs/TOKENS.md, the freeze rule; gh#687). The default lives at the call site in styles/data-display-layout.css and re-resolves there. Until gh#717 `a` was the ONE styled descendant family in Prose with no knob at all \u2014 headings, lists, quote, code and image each had one \u2014 which left the most common element in a wiki body un-theme-able (#45). default = hsl(var(--primary))"},{name:"--prose-link-decoration-line",value:"underline",description:"Underlined at rest, same vocabulary as `--text-link-decoration-line`, and deliberately a SEPARATE knob rather than a mirror of it: `none` is legal for a link in a nav row or a card title, which is what that token governs, but Prose is running text \u2014 at the shipped inks the link differs from body copy by hue alone (1.87:1 light, 1.54:1 dark), and WCAG 1.4.1 \xB7 G183 needs 3:1 for colour to carry a link on its own (gh#664). A theme that drops the rule in chrome must not drop it here by accident."},{name:"--prose-image-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--timeline-note-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-background",value:"initial",description:"Avatar surface \u2014 `initial` so the --muted default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root; a scoped role override never reaches it). A service re-tints the placeholder fill once (e.g. --avatar-background: hsl(var(--accent))). Default = hsl(var(--muted))."},{name:"--avatar-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--avatar-tint",value:"transparent",description:"Optional role wash over the avatar (default transparent = invisible, rule #44). Painted as an overlay so a service sets --avatar-tint: hsl(var(--primary) / 0.08)."},{name:"--avatar-size",value:"var(--control-height)",description:'Avatar SIZE LADDER \u2014 `<Avatar size="xs|sm|md|lg">` (gh#716). The mark is a control-row citizen: it sits inside an `icon-sm` trigger, in a 24px dense table row, beside a Button on the same line. Before this ladder the box was welded to `--control-height`, so a 32px mark inside a 28px trigger OVERFLOWED it and the only legal move left to a consumer was to raise the whole row. Each step therefore reads the SAME `--control-height-*` tier every other control reads (never a px, never a calc offset), which is what makes `size="sm"` measure exactly as tall as `<Button size="sm">` on the same row. `md` is the default and is byte-identical to what shipped before, so nothing moves. `shape="square"` rides the same ladder: each step re-declares --avatar-square-size ON THE ELEMENT (not at :root \u2014 a calc/var over two custom properties is substituted where it is DECLARED, the trap written up in tokens/components/segmented.css), so the entity mark and the person mark are the same height at every step.'},{name:"--avatar-size-xs",value:"var(--control-height-xs)",description:"The 24px step \u2014 the mark that fits an `icon-xs` trigger and a 24px dense row."},{name:"--avatar-size-sm",value:"var(--control-height-sm)",description:'The 28px step \u2014 the mark that fits an `icon-sm` trigger and a `size="sm"` control row.'},{name:"--avatar-size-lg",value:"var(--control-height-lg)",description:'The 36px step \u2014 the mark for a `size="lg"` row (a list row\'s leading identity).'},{name:"--avatar-font-size",value:"var(--font-size-base)",description:"Initials TYPE per step \u2014 one step of the type scale per step of the box, so the two letters in a 24px mark are not the 14px set for a 32px one. The ratio holds (~0.44 of the box at every step), which is what keeps initials centred and legible rather than clipped."},{name:"--avatar-font-size-xs",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Initials in the 24px mark \u2014 one step below sm on the type scale."},{name:"--avatar-font-size-sm",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:'Initials in the 28px mark \u2014 the same step a `size="sm"` control\'s label reads.'},{name:"--avatar-font-size-lg",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Initials in the 36px mark \u2014 one step above the body step."},{name:"--avatar-glyph-size-xs",value:"calc(var(--icon-size-xs) * var(--scaling))",description:"Glyph box per step \u2014 the `--icon-size-*` scale the `Icon` primitive was minted on (gh#712), multiplied by --scaling exactly as --control-icon-size is, so a glyph inside a sized mark tracks density like every other control glyph. Only a SIZED avatar sizes its glyph: there is deliberately no global `.ui-avatar svg` rule, because it would out-rank the per-call-site icon classes existing avatars already carry."},{name:"--avatar-glyph-size-sm",value:"calc(var(--icon-size-sm) * var(--scaling))",description:"Glyph in the 28px mark \u2014 --icon-size-sm, the step --control-icon-size-sm also reads."},{name:"--avatar-glyph-size-lg",value:"calc(var(--icon-size-lg) * var(--scaling))",description:"Glyph in the 36px mark \u2014 --icon-size-lg."},{name:"--avatar-square-radius",value:"initial",description:'Entity-header mark \u2014 `<Avatar shape="square">` (gh#249): the compact rounded SQUARE an organization/service header uses, as opposed to the round person avatar. Every value is a knob (rule #45) so a service matches the mark to its own grid without a className override. --avatar-square-background / --avatar-square-foreground are role-mirror knobs: `initial` so the --primary / --primary-foreground defaults re-resolve at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding to a role var would freeze at the :root value). Defaults = --radius-lg corners \xB7 --control-height box (same as the circle avatar, so swapping shape never reflows a header) \xB7 hsl(var(--primary)) fill \xB7 hsl(var(--primary-foreground)) glyph. gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)'},{name:"--avatar-square-size",value:"var(--control-height)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-square-background",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-square-foreground",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-tinted-background",value:"initial",description:'Capability medallion \u2014 `<Avatar appearance="tinted">` (gh#12): the tinted plate a capability / feature glyph sits on, as opposed to the SOLID entity mark above. Pair it with shape="square" for the canonical rounded square. --avatar-tinted-background / --avatar-tinted-foreground are role-mirror knobs (`initial`, docs/TOKENS.md) so the --primary defaults resolve at the CALL SITE and a scoped [data-tenant]/.dark override of --primary reaches them \u2014 the exact reason this is a token and not the `hsl(var(--primary) / 0.1)` literal consumers were writing in page CSS. Defaults = hsl(var(--primary) / 0.1) wash \xB7 hsl(var(--primary)) glyph \xB7 --control-icon-size glyph box.'},{name:"--avatar-tinted-foreground",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-tinted-glyph-size",value:"var(--control-icon-size)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-size",value:"30%",description:'PRESENCE INDICATOR \u2014 `<Avatar presence="online|away|busy|offline">` (gh#309): the realtime reachability dot pinned to the block-end/inline-end corner of the mark. Every constant below is a knob (rule #45) and the separator ring is chrome that reads a token (rule #44), because the hand-rolled workaround this replaces \u2014 `bg-green-500 ring-2 ring-background -end-0.5 -bottom-0.5` on a wrapper span \u2014 bakes four service-tunable constants and a raw palette colour into a consumer page. --avatar-presence-size is a PROPORTION of the mark, not a px step. One value therefore tracks EVERY avatar the system paints \u2014 the --control-height default box, a `size-12` call site, the --avatar-square-size entity mark, --org-switcher-avatar-size (1.75rem), --upload-avatar-size (6rem), the 36px ListRow density="compact" leading mark \u2014 instead of freezing one diameter that is a boulder on a 24px mark and a speck on a 96px one. --avatar-presence-min-size is the legibility floor for the smallest marks; --avatar-presence-inset lets a service pull the dot further into a round mark than into a square one. --avatar-presence-ring-color and the four state colours are ROLE-MIRROR knobs: declared `initial` here so the --background / --success / --warning / --destructive / --muted-foreground defaults resolve at the CALL SITE and a scoped [data-tenant] / .dark override of the ROLE still reaches them (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Binding them to the role here would freeze the ring light-mode-white on a dark avatar. Presence is never colour-alone (WCAG 1.4.1): the colour rides with a SHAPE \u2014 filled \xB7 half filled \xB7 barred \xB7 hollow \u2014 and a localized sr-only string, so --avatar-presence-stroke-width and --avatar-presence-bar-* are part of the accessible encoding, not decoration. Defaults = 30% of the mark, floor 0.5rem \xB7 flush with the mark\'s corner \xB7 2px separator ring in --background \xB7 1.5px state stroke \xB7 a 56%-wide, 1.5px dnd bar.'},{name:"--avatar-presence-min-size",value:"var(--space-2)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-inset",value:"0",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-ring-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--avatar-presence-stroke-width",value:"initial",description:"default = var(--stroke-sm), resolved at the call site (gh#906)"},{name:"--avatar-presence-bar-inline-size",value:"56%",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-bar-block-size",value:"initial",description:"default = var(--stroke-sm), resolved at the call site (gh#906)"},{name:"--avatar-presence-ring-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-online-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-away-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-busy-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-offline-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-track-background",value:"initial",description:"Progress track + fill \u2014 `initial` so the role defaults re-resolve under a scoped theme. Track reads --secondary, fill reads --success; a service re-tones once. Defaults = hsl(var(--secondary)) track \xB7 hsl(var(--success)) fill."},{name:"--progress-track-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--progress-fill-background",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-breakdown-block-size",value:"1.375rem",description:"BREAKDOWN geometry (`segments`) \u2014 its own block size and corner, not the meter's. A 0.5rem pill carries ONE fill legibly; three abutting fills at that height read as a coloured hairline and the ratios stop being comparable, which is the only thing a breakdown is for. The corner follows --radius rather than --radius-pill: pill ends would round the first and last slice only, so the partition would look like it starts and stops somewhere other than where it does."},{name:"--progress-breakdown-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--progress-meter-block-size",value:"0.5rem",description:'`size="sm"` \u2014 the SAME two forms, thinner, for a bar that annotates a row rather than being the subject of the screen (an in-table capacity column). The meter step is half its default hairline; the breakdown step lands exactly on the meter\'s default 0.5rem, which is the thinnest a partition can be and still show three fills apart. Below that the ratios are gone, which is why there is no `xs`.'},{name:"--progress-meter-block-size-sm",value:"0.25rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-breakdown-block-size-sm",value:"0.5rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-ring-size",value:"2.75rem",description:'RING geometry (`shape="ring"`) \u2014 the SAME meter, drawn as an arc. The diameter is a control tier rather than a new scale: a ring lives beside a title in an app bar, so it has to sit level with the controls around it the way the bar does. The stroke is the emphasis stroke (`--stroke-lg`), thick enough that the arc reads as a quantity at 2.75rem rather than as a hairline outline; `sm` keeps the same stroke on a smaller circle, because a thinner arc at a smaller diameter stops being readable as a proportion at all.'},{name:"--progress-ring-size-sm",value:"2rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-ring-border-width",value:"initial",description:"default = var(--stroke-lg), resolved at the call site (gh#906)"},{name:"--progress-ring-label-font-size",value:"initial",description:'A KNOB, with the derivation at the CALL SITE \u2014 and the first attempt got this wrong. It was `--font-size-xs`, one value for every diameter, so a 32px `sm` ring carried the same 12.47px label as the 44px default and "18/42" measured 32.6px \u2014 wider than the ring, painting over the arc. "0/42" fits, which is why the demo looked correct. The fix was `calc(var(--progress-ring-size) * 0.28)` HERE, and that does not work: a custom property substitutes its var() where it is DECLARED, so this reads the `:root` diameter and freezes. Measured after that change \u2014 both the 44px and the 32px ring rendered a 12.32px label, i.e. the sm ring was not scaled at all and only `max-inline-size` was saving it. The same freeze rule this repo documents for `--ring` and the primary family, walked into while fixing something else. So it is `initial`, and the formula lives at the element that PAINTS it, where `--progress-ring-size` is whatever `[data-size="sm"]` last said. 0.28 reproduces the previous default (44 \xD7 0.28 = 12.3px \u2248 the 12.47 it replaces), so the md ring does not move.'},{name:"--legend-gap",value:"0.875rem",description:`Legend \u2014 the key for a colour-coded surface. Small chrome, so it carries its own rhythm rather than the stack scale: the swatch is a MARK the size of a character, not a control, and the gap that reads as "these two belong together" is tighter than any named step. scale-exempt: the legend's rhythm follows its TYPE (11-12px), not the layout space scale \u2014 --space-3 (12px) is close enough to the item gap that a swatch starts binding to the label on its left, and --space-4 (16px) breaks three keys into three objects.`},{name:"--legend-item-gap",value:"0.3125rem",description:"scale-exempt: half the swatch, so a mark and its label read as one word; derived from --legend-swatch-size, not from the layout scale."},{name:"--legend-swatch-size",value:"0.625rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--legend-swatch-radius",value:"0.125rem",description:"scale-exempt: --radius (6px) on a 10px square is 60% of the mark and reads as a DOT, a different symbol; this is the smallest corner that softens the square without becoming one."},{name:"--legend-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--legend-color",value:"initial",description:"`initial` so the muted role re-resolves at the call site under a scoped theme. Default = hsl(var(--muted-foreground))."},{name:"--swatch-size",value:"1rem",description:"Swatch \u2014 a read-only sample of ONE colour a person chose (gh#527). The mark is Legend's square, one step larger: a legend swatch rides an 11-12px label, while this one stands beside a NAME at body size, and at 0.625rem beside 14px type it reads as a bullet rather than as a sample of a colour."},{name:"--swatch-radius",value:"0.125rem",description:"scale-exempt: the same corner as --legend-swatch-radius \u2014 --radius (6px) on a 16px square reads as a DOT, a different symbol, and a sample and a key mark must be the same shape."},{name:"--swatch-border-width",value:"initial",description:"The hairline that keeps a white value visible on a white card. It is the resting border weight, not a decision of this component. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--swatch-border-color",value:"initial",description:"`initial` so the border role re-resolves at the call site under a scoped theme. Default = hsl(var(--border))."},{name:"--swatch-color",value:"hsl(var(--muted))",description:'The caller\'s colour \u2014 the only knob here that is PER-INSTANCE. swatch.tsx writes it inline on the element, and an inline declaration outranks this one, so this is the value only when the prop is empty. It has to be declared all the same: an undeclared custom property has no fallback to fall back TO, which is the failure check-dist-tokens-resolve.mjs exists to catch. `--muted` is the right default because an unset sample should read as "no colour recorded" rather than as a colour nobody chose.'},{name:"--feature-list-space-gap",value:"var(--space-stack-sm)",description:"Between statements: tight enough that the column reads as one list, loose enough that a two-line item does not merge with the next one."},{name:"--feature-list-space-inline",value:"var(--space-inline-sm)",description:"Glyph column \u2194 label."},{name:"--feature-list-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--feature-list-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--feature-list-mark-icon-size",value:"var(--icon-size-md)",description:"The glyph takes the same step a Button's icon takes, so a feature list beside a control tier reads at the same weight. The mark BOX is `1lh` in the stylesheet \u2014 deliberately not a token, because the one correct value is \"however tall this text's line is\"."},{name:"--thumbnail-block-size-sm",value:"4rem",description:"Thumbnail \u2014 a framed picture at a fixed height, intrinsic width. Three steps, chosen for the surfaces that asked for them rather than derived: an inline attachment strip, a gallery row, and a review screen. The `height` axis has no named scale in this library on purpose (see scripts/token-scale-bypass-rules.mjs \u2014 container heights barely repeat). 64px \u2014 an attachment chip beside its filename."},{name:"--thumbnail-block-size",value:"6rem",description:"96px \u2014 the default: a gallery row that still shows the shot."},{name:"--thumbnail-block-size-lg",value:"10rem",description:"160px \u2014 a review screen, where the picture IS the content."},{name:"--thumbnail-width-ratio",value:"4 / 3",description:"Image `size` frame: width = the Thumbnail height \xD7 this ratio."},{name:"--thumbnail-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--thumbnail-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--text-diff-removed-background-alpha",value:"0.12",description:"TextDiff (gh#1096) \u2014 the grounds under a removed and an added run. The INK stays the text colour: the mark that carries the meaning is the strike-through / underline plus a spoken label, so the tint only has to separate the run from its neighbours. The grounds read the status surface role (gh#866) and fall back to the tone at these alphas."},{name:"--text-diff-added-background-alpha",value:"0.16",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--text-diff-mark-line-width",value:"var(--stroke-hairline)",description:"The underline/strike weight \u2014 the resting hairline, so it survives forced-colors as ink."},{name:"--text-diff-space-gap",value:"var(--space-3)",description:"Space between the before and after columns in split mode, and around a folded run."},{name:"--text-diff-space-inset",value:"var(--space-2)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-dot-done-background",value:"initial",description:"Timeline accents \u2014 `initial` so the dot/line role defaults re-resolve under a scoped theme. ONE HUE down the whole progress column (gh#731): done, current and the travelled line all default to hsl(var(--primary)), the way Steps paints `finish` and `process`; current is told apart by its ring, not by a second role. To restore the pre-27.9 green/violet pairing, set the done dot's FILL and its INK together \u2014 the two roles have opposite ink polarity, so the fill alone leaves a near-white glyph on \u82E5\u7AF9 green at 2.19:1 (gh#643): --timeline-dot-done-background: hsl(var(--success)); --timeline-dot-done-foreground: hsl(var(--success-foreground));"},{name:"--timeline-dot-done-foreground",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-dot-current-background",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-line-completed-background",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-dot-current-ring-width",value:"initial",description:"The current dot's ring is the ONLY chromatic difference from a done dot, so it is `--steps-dot-process-ring-width` token-for-token \u2014 the same ring, meaning the same thing. default = var(--stroke-xl), resolved at the call site (gh#906)"},{name:"--timeline-item-gap",value:"initial",description:'Space between items and between rail and body. `initial` so `Timeline density="compact"` can retune it on the root; default = var(--space-stack-md), compact = --timeline-item-gap-compact (default var(--space-stack-sm)), resolved at the call site.'},{name:"--timeline-item-gap-compact",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-foreground",value:"0 0% 0%",description:"QR codes stay scanner-safe in light and dark application themes. Consumers may override these component tokens only when the resulting pair retains strong contrast."},{name:"--qr-code-background",value:"0 0% 100%",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-size-xs",value:"6rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-size-sm",value:"8rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-size-md",value:"10rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-size-lg",value:"12.5rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-hour-height",value:"2.5rem",description:"TIMELINE GRID \u2014 the time-axis half of the Timeline family (#354 item 7). Every measure the hand-rolled week grids in docs/showcase baked as a literal is a knob here: the height of one hour is what a service tunes when a 24-hour axis has to fit one screen, and the column floor is what decides when the grid scrolls instead of collapsing into slivers. --timeline-grid-hour-height is a RAW rem on the unenforced height axis: it is a rhythm the consumer picks per surface (a 6-hour shift board wants a taller hour than a 24-hour one), not a step of the spacing scale."},{name:"--timeline-grid-axis-width",value:"3.25rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-column-min-width",value:"6rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-min-height-minutes",value:"36",description:"S\xE0n hi\u1EC3n th\u1ECB c\u1EE7a m\u1ED9t kh\u1ED1i s\u1EF1 ki\u1EC7n, t\xEDnh b\u1EB1ng PH\xDAT ch\u1EE9 kh\xF4ng b\u1EB1ng pixel. \u0110\xE2y l\xE0 NGU\u1ED2N DUY NH\u1EA4T: CSS suy chi\u1EC1u cao t\u1ED1i thi\u1EC3u t\u1EEB n\xF3, v\xE0 thu\u1EADt to\xE1n x\u1EBFp l\xE0n c\u0169ng d\xF9ng \u0111\xFAng con s\u1ED1 n\xE0y \u0111\u1EC3 bi\u1EBFt hai kh\u1ED1i c\xF3 \u0111\xE8 nhau tr\xEAn m\xE0n h\xECnh hay kh\xF4ng. N\u1EBFu \u0111\u1EC3 s\xE0n b\u1EB1ng pixel th\xEC thu\u1EADt to\xE1n t\xEDnh theo th\u1EDDi gian c\xF2n CSS l\u1EA1i k\xE9o chi\u1EC1u cao l\xEAn, v\xE0 hai ca kh\xF4ng tr\xF9ng gi\u1EDD v\u1EABn v\u1EBD ch\u1ED3ng."},{name:"--timeline-grid-axis-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-head-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-gap",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-space-inset",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--timeline-grid-event-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--timeline-grid-now-width",value:"initial",description:"default = var(--stroke-sm), resolved at the call site (gh#906)"},{name:"--timeline-grid-line-color",value:"initial",description:"Role-mirror knobs (docs/TOKENS.md): `initial` so the defaults re-resolve at the CALL SITE and a scoped [data-tenant]/.dark override of the role still reaches them. Defaults = hsl(var(--border)) hour rules \xB7 hsl(var(--primary)) block accent \xB7 hsl(var(--destructive)) now marker \xB7 hsl(var(--primary)) current-column wash."},{name:"--timeline-grid-event-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-muted-color",value:"hsl(var(--foreground))",description:"Ch\u1EEF ph\u1EE5 trong kh\u1ED1i s\u1EF1 ki\u1EC7n n\u1EB1m tr\xEAn n\u1EC1n \u0110\xC3 T\xD4 theo m\xE0u c\u1EE7a b\xEAn ti\xEAu th\u1EE5, n\xEAn --muted-foreground v\u1ED1n hi\u1EC7u ch\u1EC9nh cho n\u1EC1n trang kh\xF4ng c\xF2n \u0111\u1EE7 t\u01B0\u01A1ng ph\u1EA3n: \u0111o \u0111\u01B0\u1EE3c 4,24 tr\xEAn n\u1EC1n t\xF4 12%, d\u01B0\u1EDBi ng\u01B0\u1EE1ng 4,5 m\xE0 c\u1EE1 ch\u1EEF n\xE0y \u0111\xF2i. M\u1EB7c \u0111\u1ECBnh d\xF9ng ch\xEDnh m\xE0u ch\u1EEF ch\xEDnh, th\u1EE9 b\u1EADc do \u0111\u1ED9 \u0111\u1EADm c\u1EE7a ti\xEAu \u0111\u1EC1 \u0111\u1EA3m nhi\u1EC7m; m\u1ED9t service bi\u1EBFt b\u1EA3ng m\xE0u c\u1EE7a m\xECnh c\xF3 th\u1EC3 d\u1ECBu l\u1EA1i."},{name:"--timeline-grid-now-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-current-tint",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--permission-matrix-label-width",value:"16rem",description:"PERMISSION MATRIX \u2014 the sticky-first-column grid. Nothing here was themeable: the class `.ui-permission-matrix` existed as a bare hook with no CSS rule at all, so every constant lived on the component (#319). A JA/VI service whose role names run longer than the English ones could not widen the label column without forking."},{name:"--permission-matrix-role-space-gap",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--permission-matrix-name-space-gap",value:"0.375rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--permission-matrix-cell-icon-size",value:"var(--control-icon-size)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--permission-matrix-min-width",value:"48rem",description:"Floor for the scrolling body \u2014 below this the columns collapse into unreadable slivers, so the table scrolls instead. Mirrors --table-surface-min-inline-size on DataTable."},{name:"--range-timeline-label-width",value:"var(--app-shell-sidebar-width)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-unit-width",value:"var(--range-timeline-unit-width-default)",description:"Floor for ONE axis unit, so a day column never collapses; the live knob the canvas reads. `density` re-points it per instance at the three steps below \u2014 set THIS one in a theme to move every step's baseline, set a step to retune one density."},{name:"--range-timeline-unit-width-compact",value:"calc(var(--control-height-sm) * 1.5)",description:"Day-column steps on the `density` axis (gh#730). `default` is the shipped 56px, unchanged, so no existing Gantt moves; `compact` is 1.5 control-sm (42px), which leaves a 24px content box \u2014 measured, the widest two-digit day label across the ja/en/vi/ar/fa/hi/th/bn numbering systems is 19.86px (Thai \u0E52\u0E57), so the tick still fits; `comfortable` is 2.5 (70px) for a wide screen. Multiples of --control-height-sm, never literals, so the axis follows the global density/scaling factor too."},{name:"--range-timeline-unit-width-default",value:"calc(var(--control-height-sm) * 2)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-unit-width-comfortable",value:"calc(var(--control-height-sm) * 2.5)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-row-height",value:"var(--control-height-lg)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-bar-height",value:"var(--control-height-sm)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-border-color",value:"var(--border)",description:"The OUTER FRAME of the timeline and its label-column divider \u2014 the --border tier, the same rule weight a Card edge and a DataTable row use. The grid INSIDE it now reads the same tier (see --range-timeline-grid-color), which is the point of gh#730: the day grid may never be heavier than the frame around it, and at one tier it cannot become so under any theme."},{name:"--range-timeline-grid-color",value:"initial",description:"Body grid (`RangeTimeline bordered`, on by default): row rules, the header rule and a vertical rule per column down the whole body. Colour `initial` on purpose \u2014 the role default is read at the call site as `var(--range-timeline-grid-color, hsl(var(--border)))` so it follows a scoped theme. The --border tier: L* 93.80 / contrast 1.149 on the card in light, L* 20.76 / 1.270 in dark \u2014 identical to the outer frame and to a DataTable row rule, which is the whole point. Asked for three times: 25.3.0 drew the grid at all, 27.6.0 lightened the full --input (3.47) to --input/0.5 (1.74, L* 78.67), and gh#730 reported that still darker than the --border (L* 93.80) every card and table uses, so the eye followed the grid instead of the bars. Set any colour to retint, e.g. `hsl(var(--input) / 0.5)` for the 27.6.0 weight."},{name:"--range-timeline-grid-width",value:"initial",description:"Weight of every grid rule, header column rules included, so header and body stay aligned. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--range-timeline-muted-column-background",value:"initial",description:"Fill for `columns[].muted` (a non-working day), full body height. `initial`; call-site default `hsl(var(--muted))`, the header's own surface, so a muted column reads as part of the axis."},{name:"--range-timeline-indent-width",value:"var(--space-4)",description:"Label-column indent per `rows[].depth` level (gh#724). The label column keeps its width."},{name:"--record-picker-list-max-block-size",value:"22rem",description:"RecordPicker \u2014 chi\u1EC1u cao T\u1ED0I \u0110A c\u1EE7a danh s\xE1ch trong Dialog (gh#932). M\u1ED9t h\u1EB1ng s\u1ED1 \u1EDF \u0111\xE2y l\xE0 th\u1EE9 kh\xF4ng theme n\xE0o v\u1EDBi t\u1EDBi: m\u1ED9t service d\xF9ng h\xE0ng d\xE0y h\u01A1n, ho\u1EB7c m\u1ED9t Dialog cao h\u01A1n, c\u1EA7n \u0111\u1ED5i \u0111\u01B0\u1EE3c con s\u1ED1 n\xE0y m\xE0 kh\xF4ng ph\u1EA3i \u0111\xE8 selector c\u1EE7a th\u01B0 vi\u1EC7n."},{name:"--record-picker-suggest-max-block-size",value:"14rem",description:"Danh s\xE1ch g\u1EE3i \xFD d\u01B0\u1EDBi \xF4 inline (gh#944) \u2014 ng\u1EAFn h\u01A1n danh s\xE1ch trong Dialog, v\xEC n\xF3 n\u1EB1m TRONG d\xF2ng ch\u1EA3y c\u1EE7a form ch\u1EE9 kh\xF4ng ph\u1EA3i trong m\u1ED9t l\u1EDBp ph\u1EE7 ri\xEAng."},{name:"--password-strength-score-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-entry component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--password-strength-checklist-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-entry component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--branch-scope-picker-gap",value:"0.75rem",description:"Stack rhythm between the mode radios, the subset box and the error line (was `gap-3`)."},{name:"--branch-scope-picker-badges-gap",value:"0.375rem",description:"Read-only summary: the wrapped run of branch Badges (was `gap-1.5`)."},{name:"--branch-scope-picker-subset-gap",value:"0.5rem",description:'The `mode="selected"` subset box \u2014 its inner stack rhythm and the inset that clears its indent rule (was `gap-2` / `ps-4`).'},{name:"--branch-scope-picker-subset-padding-inline",value:"1rem",description:"Data-entry component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--branch-scope-picker-subset-border-width",value:"initial",description:"The indent rule itself is CHROME (#44), so it is a knob: a service that wants the flat treatment sets it to 0 rather than forking the component. Default = today's `border-s-2`. default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--branch-scope-picker-list-max-height",value:"16rem",description:"Bounded height of the scrollable branch list (was `max-h-64`). Flat by design: the box is a keyboard-reachable scroll region whose job is to cap the control's measure, so it must not grow with density and push the surrounding form off a 390px frame."},{name:"--descriptions-label-width",value:"8rem",description:'Width of the label column when <Descriptions layout="horizontal">. Labels align to this shared column so the values line up (the horizontal-detail look, mirroring <Form layout>). A rem value gives a fixed aligned column; set `max-content` to size each label to its text. (rule #44/#45 \u2014 a service theme tunes it here instead of forking CSS.)'},{name:"--descriptions-row-gap",value:"var(--space-3)",description:"Row-to-row gap (gh#294). Default = the historical hardcoded `gap-y-3`, so nothing changes visually by default. A consumer composing Descriptions beside a Form/FormField (a read-only block above an editable field on the same card) retunes this to `var(--space-4)` to match Form's own field-to-field rhythm instead of the two blocks reading as visually unrelated."},{name:"--descriptions-column-gap",value:"1.5rem",description:"Column-to-column gap of the <dl> grid (#319). Was a hardcoded `gap-x-6`, the one axis of the grid rhythm a service could NOT reach while --descriptions-row-gap was already a knob \u2014 so a 2/3-column detail block could be retuned vertically but never horizontally. A RAW rem, deliberately NOT var(--space-6): `gap-x-6` reads Tailwind's own --spacing grid, which this repo does NOT density-scale, so a --space-* default would silently rescale the column gap under a compact/comfortable density. Point it at var(--space-6) to opt in."},{name:"--descriptions-label-gap",value:"0.75rem",description:'Label \u2192 value gap inside ONE item when layout="horizontal" (was `gap-x-3`). Pairs with --descriptions-label-width: a service that narrows the label column usually wants to close this gap in the same step. Raw rem for the same --spacing reason as above.'},{name:"--descriptions-value-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"VALUE TYPOGRAPHY (gh#294 + #319). `FormField staticText` renders its read-only value with the SAME typography as a <dd> so a static Form row and a Descriptions value are indistinguishable when mixed on one card. That contract used to be two copies of the literal `text-sm` plus a comment asking future editors to keep them in sync; both call sites now read these tokens, so the mirror is mechanical and a service retunes BOTH from one place."},{name:"--descriptions-value-line-height",value:"calc(1.25 / 0.875)",description:"Companion to --descriptions-value-font-size (the gh#260 bug). The `text-sm` utility this replaces ALSO set a line-height, via Tailwind's default `--text-sm--line-height` (= calc(1.25 / 0.875)); the theme remaps --text-sm but never that companion. Without this the value would silently inherit ambient leading instead of its own 20px line box."},{name:"--descriptions-label-font-size",value:"var(--descriptions-value-font-size)",description:"LABEL TYPOGRAPHY. The label was a hard-coded `text-xs` utility while the value beside it read a token, so the pair sat ONE TYPE STEP APART (`--font-size-xs` \u224812.5px against `--font-size-sm`, which IS `--font-size-base` at 14px) and every row rendered its value BIGGER than its own label. What separates a label from its value is COLOUR, not size. The LABEL is raised to the value's step rather than the value shrunk to the label's: the value is the DATA, and shrinking it would move every consumer's field panel and `FormField staticText` with it. Defaulting to the value token locks the pair together by construction while leaving each side reachable. Measured by check:descriptions-label-value-step."},{name:"--descriptions-label-line-height",value:"var(--descriptions-value-line-height)",description:"Companion, for the same reason the value has one (gh#260): the `text-xs` utility this replaces ALSO carried a line-height, so dropping it without a replacement would leave the label inheriting ambient leading instead of its own line box."},{name:"--descriptions-row-border",value:"none",description:"ROW CHROME (gh#414) \u2014 the ruled property panel. Both knobs are QUIET by default (rule #44), so an existing Descriptions is byte-identical: no rule, no band height. Same shape as --page-header-divider / --page-toolbar-divider / --page-footer-divider on PageContainer: a `border` shorthand a service opts into with ONE declaration (`--descriptions-row-border: var(--stroke-hairline) solid hsl(var(--border))`), read at the call site. Bound at :root rather than `initial` because the default is a plain CSS keyword, not another role token \u2014 there is nothing for a scoped [data-tenant]/.dark override to re-resolve, and the keyword is worth reading here (the same reasoning --page-toolbar-background records). The rule is drawn only on an UNBORDERED grid: `bordered` already draws a rule between every cell, and a second block-end border would double every line it owns. --descriptions-row-min-height gives the ruled variant its band height \u2014 a ruled row whose value is one short line otherwise reads as a hairline sandwich. `auto` = today. A continuously ruled panel sets --descriptions-row-gap to `0` in the same declaration block: the row gap is the space BETWEEN rules, so leaving it at the default 12px draws a ladder of detached hairlines rather than a ruled list."},{name:"--descriptions-row-min-height",value:"auto",description:"Descriptions component tokens."},{name:"--descriptions-border-width",value:"initial",description:"BORDERED grid (antd `bordered`). The rule between cells and the frame around them. Width is a stroke step so a service that thickens every hairline gets this one with it; colour is deliberately left to the global `border-color` role so a scoped [data-tenant] override still reaches it. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--descriptions-border-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--descriptions-cell-padding-y",value:"var(--space-2)",description:"Inset inside one bordered cell. Only read while `bordered` is set \u2014 an unbordered Descriptions has no cell box to pad, and gains nothing."},{name:"--descriptions-cell-padding-x",value:"var(--space-3)",description:"Descriptions component tokens."},{name:"--descriptions-label-background",value:"initial",description:"Shaded label cell, the half of antd's bordered table that makes the pairs readable at a glance. `initial` so the --muted default re-resolves under a scoped theme. Default = hsl(var(--muted))."},{name:"--draggable-panel-inset",value:"var(--space-6)",description:"Resting inset from the viewport edge at the panel's placement corner."},{name:"--draggable-panel-offset-x",value:"0",description:"Applied offset from that corner, in CSS pixels. Written by the component."},{name:"--draggable-panel-offset-y",value:"0",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-step-offset",value:"var(--space-2)",description:"Keyboard nudge, one arrow press. Shift takes the larger step (WCAG 2.1.1 path)."},{name:"--draggable-panel-step-offset-lg",value:"var(--space-10)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-width-sm",value:"18rem",description:"Width ladder. A floating assistant is a column of text, so these are reading measures."},{name:"--draggable-panel-width",value:"22rem",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-width-lg",value:"28rem",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-width-xl",value:"var(--centered-shell-width-md)",description:"xl: nearest wide-content tier on the shell measure ladder (gh#607), not a one-off 46rem."},{name:"--draggable-panel-block-size",value:"auto",description:"Definite height when set; `auto` keeps the pre-607 shrink-to-content behaviour."},{name:"--draggable-panel-max-block-size",value:"70vh",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--draggable-panel-shadow",value:"var(--shadow-lg)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--draggable-panel-bar-padding",value:"var(--space-2) var(--space-3)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-bar-gap",value:"var(--space-2)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-body-padding",value:"var(--space-4)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-handle-size",value:"var(--control-affix-icon-size)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--email-shell-width",value:"480px",description:"\u2500\u2500 Shell \u2014 the 480px transactional-email geometry \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 canonical transactional card width"},{name:"--email-shell-padding",value:"32px",description:"card inset \u2014 mirrors --space-8 (2rem)"},{name:"--email-shell-page-padding",value:"24px",description:"gutter between the client viewport and the card (--space-6)"},{name:"--email-shell-border-width",value:"1px",description:"card edge \u2014 mirrors the 1px --border hairline"},{name:"--email-card-radius",value:"10px",description:"mirrors --card-radius (--radius-xl = 6px \xD7 \u03C6 \u2248 10px)"},{name:"--email-card-reference-height",value:"407px",description:"canonical invitation reference measures 480\xD7407"},{name:"--email-stack-gap",value:"24px",description:"block rhythm \u2014 mirrors --space-stack-lg (1.5rem)"},{name:"--email-stack-gap-sm",value:"12px",description:"tight rhythm \u2014 mirrors --space-3 (0.75rem)"},{name:"--email-mark-width",value:"22px",description:'The mark ARTWORK is the same 32\xD732 capsule + glyph `<Logo mark="godx" />` paints; only the RENDERED BOX differs. The canonical SCR-302 header sets it at 22px next to a 13px/700 "GoDX" wordmark, which is smaller than the web --logo-godx-size (2rem) \u2014 an email header carries the identity, not the navigation, so the lockup sits quieter (gh#250). canonical SCR-302 header lockup mark box'},{name:"--email-mark-height",value:"22px",description:"EMAIL component tokens \u2014 the geometry/typography half of the transactional-email contract (`@godxjp/ui/email`). HTML email cannot read CSS custom properties: Outlook/Gmail strip <style> blocks and require LITERAL inline values, so a Blade/Twig/MJML template can never `var()` these. They still live in the component tier because this is the ONE source a maintainer edits \u2014 the `@godxjp/ui/email` export is GENERATED from this file plus the colour roles in foundation.css (scripts/gen-email-tokens.mjs), so an email template and a web screen can never drift apart. Every value is a LITERAL px/number (never rem, never calc, never var): email clients resolve neither the cascade nor relative units reliably, and the export must serialise to a plain hex/px string. Where a value mirrors a web token the comment names it, so a retune stays traceable. Colours are deliberately NOT redeclared here \u2014 they derive from the semantic roles (--card/--background/--foreground/--muted/--border/--primary/--ring/--brand) and are converted HSL\u2192hex at module load, so a re-themed role re-tints the email with zero copy-paste. The identity mark reads --brand, NOT --success: --success is the wakatake status green, and the two are deliberately distinct roles (gh#250)."},{name:"--email-mark-gap",value:"8px",description:"mark \u2194 wordmark \u2014 mirrors --logo-wordmark-gap (--space-2)"},{name:"--email-wordmark-font-size",value:"13px",description:"canonical wordmark size (\u2248 --font-size-xs 12.5px)"},{name:"--email-wordmark-font-weight",value:"700",description:"mirrors --logo-wordmark-font-weight"},{name:"--email-font-family-sans",value:'"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, "M PLUS 2", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Arial, sans-serif',description:'The DXS canonical face is Noto Sans JP (see src/styles/fonts.css; product override, direct instruction). Email clients honour NO @font-face, so the stack ships the face NAME first and degrades through the platform JP faces to a generic \u2014 a client with Noto Sans JP installed (or a webmail that already loaded it, which is common \u2014 it is a widely preinstalled/CDN-cached Google face, more likely to actually render than the niche M PLUS 2 ever was) renders the canonical face, everything else lands on Hiragino (macOS/iOS) \u2192 Yu Gothic (Windows) \u2192 M PLUS 2 \u2192 Meiryo \u2192 the system UI face \u2192 Arial \u2192 sans-serif. Family names are SINGLE-quoted on export (the generator normalises) because an inline `style="\u2026"` attribute is double-quoted; only ASCII aliases are listed, since a non-ASCII family name does not survive every transfer encoding.'},{name:"--email-font-family-mono",value:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",description:"Tabular/reference strings \u2014 invoice ids, masked card numbers, ISO dates, amounts \u2014 are set in the mono face in the canonical card. Mirrors --font-family-mono."},{name:"--email-body-font-size",value:"14px",description:"mirrors --font-size-base (0.875rem)"},{name:"--email-body-line-height",value:"1.9",description:"1.9, NOT the web --line-height-body (1.7) \u2014 the canonical email card runs its JP body copy looser than a screen, because a mail client gives the reader no density control."},{name:"--email-body-font-weight",value:"400",description:"mirrors --font-weight-normal"},{name:"--email-heading-font-size",value:"17px",description:"canonical card title (\u2248 --heading-h2, base \xD7 \u03C6^\xBC\xB2 \u2248 17.6px)"},{name:"--email-heading-line-height",value:"1.7",description:"the title shares the card's body leading, not a tight ramp"},{name:"--email-heading-font-weight",value:"500",description:"mirrors --font-weight-medium \u2014 an email title is calm, not bold"},{name:"--email-cta-height",value:"44px",description:`TOUCH TARGET, deliberately DECOUPLED from --control-height-lg (36px). Do not "restore" the mirror: email is a mobile-first, touch-only medium. There is no hover state, no precise pointer, and mail clients do not reliably offer zoom or a focus affordance \u2014 so the web's AA floor (SC 2.5.8, 24x24, which 36px clears) is the wrong bar here. 44px is the AAA target size (SC 2.5.5, 44x44) and the Apple HIG 44pt / Material 48dp convention. A service that must keep the old box sets --email-cta-height + --email-cta-line-height in its own theme.`},{name:"--email-cta-line-height",value:"44px",description:"equal to the height: bulletproof vertical centring in Outlook"},{name:"--email-cta-padding-x",value:"16px",description:"mirrors --space-4"},{name:"--email-cta-radius",value:"6px",description:"mirrors the --radius base (0.375rem)"},{name:"--email-cta-font-size",value:"14px",description:"mirrors --font-size-base"},{name:"--email-cta-font-weight",value:"500",description:"mirrors --font-weight-medium"},{name:"--email-footer-font-size",value:"11px",description:"\u2500\u2500 Legal footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 mirrors --font-size-2xs (base \xF7 \u03C6^\xBC\xB2 \u2248 11.1px)"},{name:"--email-footer-line-height",value:"1.8",description:"the legal band runs looser than the web --line-height-normal"},{name:"--email-footer-link-gap",value:"12px",description:"horizontal separation between footer links (--space-3)"},{name:"--email-footer-padding-top",value:"20px",description:"space above the legal band"},{name:"--email-footer-border-width",value:"1px",description:"the hairline above the legal band"},{name:"--email-focus-border-width",value:"2px",description:"\u2500\u2500 Focus affordance (webmail preview panes that DO honour :focus) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 mirrors --focus-ring-width"},{name:"--email-mobile-max-width",value:"520px",description:"\u2500\u2500 Mobile reflow \u2014 applied under the narrow media query and by inline fallbacks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 the reflow breakpoint (card width + both gutters)"},{name:"--email-mobile-width",value:"100%",description:"the card goes fluid below the breakpoint"},{name:"--email-mobile-padding",value:"20px",description:"reduced card inset \u2014 mirrors --space-5"},{name:"--email-mobile-page-padding",value:"12px",description:"reduced viewport gutter \u2014 mirrors --space-3"},{name:"--email-mobile-heading-font-size",value:"16px",description:"One step below the 17px desktop title. The canonical 390px reference raster is unusable (it is 435px wide and already clips the card \u2014 dxs-platform/platform#496), so this is the library's documented contract rather than a measured canonical value."},{name:"--email-mobile-cta-width",value:"100%",description:"the CTA goes full-bleed so the tap target spans the card"},{name:"--error-surface-max-width",value:"32rem",description:"Measure of the surface block. Caps the status code + body + metadata column so a long ja/vi headline wraps at a readable width in BOTH shells, including the application shell where PageContainer is much wider than the copy wants to be."},{name:"--error-surface-gap",value:"var(--space-3)",description:"Rhythm between the status code, the EmptyState body, the metadata list and the progress meter."},{name:"--error-surface-padding-block",value:"var(--space-10)",description:"Block padding of the surface inside the shell it is placed in. Desktop (1440/1024) default; the 390 step steps it down so a phone loses no vertical space (see styles/shell-layout.css)."},{name:"--error-surface-padding-block-compact",value:"var(--space-6)",description:"ErrorSurface \u2014 the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251). Package-owned geometry: a service retunes the surface here (or in its own theme.css) instead of forking `.ui-error-surface` or adding a `className` to the component. Chrome defaults are QUIET (cardinal rule #44): the metadata block ships with no divider \u2014 a service opts IN."},{name:"--error-surface-brand-gap",value:"var(--space-2)",description:"Brand slot (a Logo) above the status code, system mode only."},{name:"--error-surface-meta-gap",value:"var(--space-1)",description:"Metadata description list: row rhythm and the label\u2194value gap inside one row."},{name:"--error-surface-meta-row-gap",value:"var(--space-2)",description:"ErrorSurface \u2014 the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251). Package-owned geometry: a service retunes the surface here (or in its own theme.css) instead of forking `.ui-error-surface` or adding a `className` to the component. Chrome defaults are QUIET (cardinal rule #44): the metadata block ships with no divider \u2014 a service opts IN."},{name:"--error-surface-meta-border",value:"none",description:"Chrome, default quiet (#44). A service opts in with `--error-surface-meta-border: var(--stroke-hairline) solid hsl(var(--border));`."},{name:"--error-surface-meta-padding-block",value:"0",description:"ErrorSurface \u2014 the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251). Package-owned geometry: a service retunes the surface here (or in its own theme.css) instead of forking `.ui-error-surface` or adding a `className` to the component. Chrome defaults are QUIET (cardinal rule #44): the metadata block ships with no divider \u2014 a service opts IN."},{name:"--error-surface-progress-max-width",value:"18rem",description:"Width of the maintenance progress meter \u2014 narrower than the measure, so it reads as metadata rather than as the primary content of the page."},{name:"--sheet-width-default",value:"22.5rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-overlay-background",value:"initial",description:"Overlay scrims \u2014 `initial` so the shared semantic --overlay-background re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding to it freezes at :root and a scoped override never reaches the overlay). Each surface takes a SHARE of that one scrim rather than a private literal, so a service retints every backdrop with one --overlay-background while the calibrated per-surface depth survives: a slide-in Sheet washes the page more lightly than a modal Dialog. Defaults resolve to rgb(0 0 0 / 0.2) (sheet) and rgb(0 0 0 / 0.3) (dialog)."},{name:"--sheet-overlay-alpha",value:"40%",description:'A SHARE OF `--overlay-background`, NOT THE RESULTING ALPHA (gh#886). The base is a finished colour that already carries `/0.5`, so `40%` composites to **0.20**, and a theme author who sets `62%` gets 0.31. That is the library-wide convention for a `--*-alpha` knob in the `color-mix(in srgb, <base> <alpha>, transparent)` share form \u2014 100% means "the base as authored", 0% means gone \u2014 and it is deliberate: the calibrated depth lives ONCE in `--overlay-background` so a service retints every scrim with one line. Want an absolute opacity instead? Set `--sheet-overlay-background` directly; it wins outright. Pinned by src/styles/__tests__/overlay-alpha-share-886.test.ts. 40% of rgb(0 0 0 / 0.5) = rgb(0 0 0 / 0.20)'},{name:"--sheet-overlay-backdrop-blur-size",value:"initial",description:"GLASS \u2014 ON THE SCRIM, for the same two reasons the dialog's note below spells out. A drawer covers content that must stay unreadable-but-present, so this is the surface whose blur does the most work, and the panel's own fill belongs at the OPAQUE end of the range (docs/GLASSMORPHISM-STANDARD.md \xA74). `initial` = no blur and no backdrop root. default = none \u2014 the scrim blurs nothing"},{name:"--sheet-surface-background",value:"initial",description:"THE PANEL FILL (gh#880 item 4). This was `bg-background` baked into the Sheet's own className, which is a Tailwind utility \u2014 `@layer utilities` outranks every component-layer rule, so the drawer's surface was not merely un-knobbed, it was unreachable by any rule this package could write. The utility is gone and `.ui-sheet-panel` paints from this knob instead; unset, the default resolves to the same `hsl(var(--background))` at the call site. default = hsl(var(--background)) at the call site"},{name:"--sheet-shadow",value:"initial",description:"`initial` + the ramp default at the call site \u2014 see --tooltip-shadow (gh#880 item 7). default = var(--shadow-lg), resolved at the call site"},{name:"--sheet-header-space-gap",value:"0.375rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-title-block-space-gap",value:"var(--space-1)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-title-row-space-gap",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-extra-space-gap",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-footer-space-gap",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-title-font-size",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-description-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-body-space-block",value:"var(--space-1)",description:"The scroll region keeps a sliver of padding so a focused control's ring is never clipped at the scroll edges \u2014 retune together with --focus-ring-width."},{name:"--sheet-close-offset",value:"var(--space-4)",description:"Close button: offset from the panel corner, and the inline room the header reserves so a title never runs under it."},{name:"--sheet-close-rest-alpha",value:"0.7",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-header-close-space-inline-end",value:"var(--space-8)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-width-default",value:"32rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-viewport-inset",value:"1.5rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-overlay-background",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-overlay-alpha",value:"60%",description:'A SHARE OF `--overlay-background`, NOT THE RESULTING ALPHA (gh#886) \u2014 the miss that was reported, because this knob carried no note of its own and `60%` reads as "0.6". The base is a finished colour with `/0.5` baked in, so the product is **0.30**, and `62%` gives 0.31 rather than the darker scrim that was asked for. See `--sheet-overlay-alpha` above for the convention and for the escape hatch: `--dialog-overlay-background` is an absolute colour and wins outright. Pinned by src/styles/__tests__/overlay-alpha-share-886.test.ts. 60% of rgb(0 0 0 / 0.5) = rgb(0 0 0 / 0.30)'},{name:"--dialog-overlay-backdrop-blur-size",value:"initial",description:"GLASS \u2014 THE BLUR IS ON THE SCRIM, NEVER ON THE DIALOG BOX (gh#880). Two reasons, and both are already written down in this repo. `backdrop-filter` filters what is painted BEHIND an element, and the scrim is the layer that covers the page, so the box would only ever blur the (flat) scrim. And an element with a `backdrop-filter` becomes the containing block for its fixed descendants, which would pin the dialog to itself \u2014 the trap `src/styles/shell-layout.css` documents where the app-launcher launchpad puts its blur on the overlay for exactly this reason. docs/GLASSMORPHISM-STANDARD.md \xA74 states the same rule. `initial` = no blur AND no backdrop root, so nothing about the shipped modal moves. The dialog's own translucency is `--dialog-surface-background` below, not a second blur. default = none \u2014 the scrim blurs nothing"},{name:"--dialog-surface-background",value:"initial",description:"THE PANEL FILL \u2014 a role-mirror knob, `initial`, default `hsl(var(--background))` at the call site (gh#880 item 4). `dialog-layout.css` hard-coded that colour, which made the modal one of the surfaces a theme could not make translucent at all: `--background` is a raw HSL triplet that is already composed with an alpha elsewhere, so a theme cannot add a second `/` to it. A whole colour here can. The panel's INK is stated on the same rule (`color: hsl(var( --foreground))`, gh#877) rather than inherited \u2014 a translucent fill over inherited text is how an invisible label ships, and that is the half of this surface that was already fixed. default = hsl(var(--background)) at the call site"},{name:"--dialog-space-x",value:"var(--space-chrome-x)",description:"Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the whole system, or --dialog-space-x/-y for dialogs only)."},{name:"--dialog-space-y",value:"var(--space-chrome-y)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-space-inset",value:"var(--dialog-space-y) var(--dialog-space-x)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-space-gap",value:"var(--space-stack-md)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-close-space-offset",value:"var(--space-4)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-header-space-gap",value:"var(--space-stack-xs)",description:"Dialog chrome rhythm (#319) \u2014 the exact mirror of the --sheet-* set above, because Dialog's header markup is byte-identical to Sheet's. --dialog-space-x/-y already governed the panel inset, but every gap INSIDE the chrome (header stack, title/subtitle pair, the extra-slot row) was a literal on the component, so a service could retune the outer padding and still be stuck with the inner rhythm. Defaults are the values the literals resolved to."},{name:"--dialog-title-row-space-gap",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-title-block-space-gap",value:"var(--space-1)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-extra-space-gap",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-confirm-icon-size",value:"var(--icon-size-xl)",description:"Confirm/alert leading icon (antd `Modal.confirm` parity). antd paints a 22px status glyph to the inline-start of the title and leaves the surface untinted; the icon IS the danger signal. 22px is not a step on the icon scale, so this rides --icon-size-xl (24px) \u2014 the nearest named step, and no new value enters the scale. The gap mirrors antd's 12px margin on the glyph."},{name:"--dialog-confirm-space-gap",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-header-close-space-inline-end",value:"var(--space-8)",description:"Inline room the header reserves so a long title or the extra slot never runs under the absolutely-positioned close button; retune together with --dialog-close-space-offset. Mirrors --sheet-header-close-space-inline-end."},{name:"--dialog-close-rest-alpha",value:"0.7",description:"Close button rest opacity \u2014 quiet at rest, full on hover (rule #44). Was a hard 0.7 baked into dialog-layout.css with no way for a theme to make the \u2715 louder. Mirrors --sheet-close-rest-alpha so the two overlay siblings retune together."},{name:"--dialog-close-size",value:"var(--touch-target-min)",description:"THE CLOSE BUTTON'S TARGET, WHICH IS NOT ITS PAINT (gh#806 \xB7 WCAG 2.2 SC 2.5.8 AA). The \u2715 glyph is --control-affix-icon-size (16px) and the button had nothing around it, so the button measured 16x16 and all four +-11px probes MISSED \u2014 measured on the real Dialog frame, not a fixture. A consumer's a11y gate had to exclude the selector, and rule #47 forbids them re-sizing it themselves. The paint must NOT grow: the \u2715 sits at a fixed offset from the panel corner and enlarging the glyph moves the optical weight of every overlay in the system. So the hit area is carried by a centred pseudo-element, the same answer `.ui-data-table-sort-button::after` already ships \u2014 verified there the same way (paint 53.1x17.8, all four probes HIT). Raisable because SC 2.5.8 is a floor, not a target: a touch-first service sets this higher."},{name:"--dialog-step-up-error-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Type-to-confirm challenge: the step-up failure line under the input. Its size + ink were `text-sm text-destructive` on the component, i.e. unreachable from a theme."},{name:"--alert-radius",value:"initial",description:"Alert corner radius (gh#268 \u2014 rule #45): a full-width Alert often sits in the same page column as a Card \u2014 so the DEFAULT IS the Card radius (gh#282); a service re-tunes by overriding this once. Default keeps the historical --radius-md. `initial`, not `var(--card-radius)` \u2014 a :root binding freezes (gh#888); default resolves at the call site. Default = var(--card-radius)."},{name:"--alert-space-inset",value:"var(--space-section-active)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-space-gap",value:"var(--space-inline-md)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-inner-space-gap",value:"var(--space-stack-sm)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-dismiss-space-offset",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-icon-size",value:"var(--icon-size-lg)",description:"Leading tone glyph (the \u26A0/\u2713/\u24D8 at the start of the strip). It was a bare `1.25rem` in alert-layout.css with no token at all, so the ONLY ways to resize it were `!important` or a forked stylesheet \u2014 the two things the icon axis's tier 2 exists to abolish (gh#326). Same step, so nothing moves; a service now scopes `--alert-icon-size` to one Alert instead. Deliberately NOT --scaling-multiplied: the literal it replaces did not track density."},{name:"--alert-dismiss-rest-alpha",value:"0.7",description:"Dismiss \u2715 \u2014 rest opacity (quiet at rest, full on hover, rule #44) and glyph size. The rest alpha was a hard 0.7 in alert-layout.css whose `:hover` companion lived on the COMPONENT as `hover:opacity-100`, so the two halves of one affordance sat in two files and neither was themeable. Mirrors --sheet-close-rest-alpha. The icon size carries a raw rem, not var(--space-N): it replaces a flat Tailwind `size-4` step and must not start tracking the density axis."},{name:"--alert-dismiss-icon-size",value:"var(--icon-size-md)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-bg-alpha",value:"0.05",description:"Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec (a brand's success-bg/-border are often more present than the faint 5%/30% default)."},{name:"--alert-border-alpha",value:"0.3",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--banner-border-block-end-width",value:"initial",description:"BANNER \u2014 the page-level Alert treatment (gh#255). Every constant a service would want to match to its page grid is a knob (rule #45). --banner-radius and --banner-border-width are NOT declared here (gh#327). They used to be, and both copies were dead: components/banner.css declares the same two names at the same `:root`, base.css imports banner AFTER feedback, so banner won every time. Radius agreed at `0`, but border-width did not \u2014 this file said `0` and banner.css says `1px`, and `1px` is what alert-layout.css actually paints as the strip's block-end hairline. So anyone who read THIS file for the default was told the strip has no rule when it has one, and the MCP token catalog carried both entries with the two conflicting values. banner.css owns the strip geometry; these two live there and only there. The inline inset tracks the live page gutter, so a banner mounted above a PageContainer lines its text up with the page title instead of sitting at a second, unrelated margin. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--banner-space-block",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--banner-space-inline",value:"var(--space-page-active-x)",description:"Inline inset tracks the page gutter so a banner's text lines up with the page title. `--space-page-active-x` steps down to the compact gutter on `.ui-page-container` only, and custom properties inherit \u2014 so a banner rendered INSIDE the container picks the compact value up for free, while the normal case (a banner mounted ABOVE the container, or in AppShell) would keep the desktop gutter and sit 8px out at 390px. The compact step below is what actually keeps the two aligned; retune it rather than hard-coding a mobile inset at the call site."},{name:"--banner-space-inline-compact",value:"var(--space-page-compact-x)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--banner-dismiss-space-offset",value:"var(--space-2)",description:"Dismiss offset is measured from the banner's own (shorter) block inset, so the \u2715 stays optically centred on a one-line strip instead of floating at the inline-alert offset."},{name:"--dialog-content-glow",value:"0 0 0 0 transparent",description:"Brand glow layer for the raised dialog/sheet panel \u2014 invisible no-op at rest (rule #44). Paired AFTER --shadow-lg in the surface box-shadow so a service can wash the overlay with the global glow, e.g. --dialog-content-glow: var(--shadow-glow), with no markup change."},{name:"--empty-state-space-y",value:"var(--space-10)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-space-x",value:"var(--space-6)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-description-max-width",value:"28rem",description:"Measure of the description paragraph (rule #45 \u2014 a service-tunable constant gets a knob). 28rem reads ~65 Latin characters per line; a JA/VI service that needs a shorter or longer measure for its own copy retunes this once instead of forking `.ui-empty-state-description`."},{name:"--empty-state-section-space-y",value:"var(--space-6)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-section-space-x",value:"var(--space-4)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-compact-space-y",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-compact-space-x",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-icon-foreground",value:"initial",description:"EmptyState icon medallion colour \u2014 `initial` so the role defaults re-resolve at the call site under a scoped theme (rule #44). A service recolours the glyph (--empty-state-icon-foreground) or washes the medallion fill (--empty-state-icon-tint) without forking. Defaults = hsl(var(--muted-foreground)) glyph \xB7 hsl(var(--muted)) fill."},{name:"--empty-state-icon-tint",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-icon-size",value:"var(--icon-size-4xl)",description:"Medallion box + the glyph inside it. Both were literal (`width: 3rem` in the stylesheet, a `size-6` utility on the icon), so a service could not scale the empty-state mark to its own page rhythm \u2014 and the two must move TOGETHER or the glyph stops sitting centred in its circle, which is exactly the kind of pair rule #45 exists to keep tunable as one."},{name:"--empty-state-icon-glyph-size",value:"var(--icon-size-xl)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-row-gap",value:"var(--space-stack-sm)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-cell-gap",value:"var(--space-inline-lg)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-card-inset",value:"var(--space-section-active)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--skeleton-background",value:"initial",description:"Skeleton placeholder fill \u2014 `initial` so the --muted default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root). A service tints the shimmer to its surface (rule #44) without forking the keyframes. Default = hsl(var(--muted))."},{name:"--skeleton-block-height",value:"1rem",description:"Skeleton bar heights + widths (#319). These carry RAW rem, not var(--space-N): the literals they replace were plain Tailwind steps, which are not multiplied by --scaling. Routing them through the spacing scale would silently make the loading state track the density axis while the loaded content it stands in for does not. Names say what each bar STANDS IN FOR, so a service retuning its type scale knows which one to move."},{name:"--skeleton-caption-height",value:"0.75rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-title-height",value:"1.75rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-label-width",value:"6rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-detail-value-max-width",value:"28rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-stat-value-width",value:"8rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-stat-caption-width",value:"5rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-element-radius",value:"initial",description:"SKELETON \xB7 antd 6 parity (ant-design/components/skeleton/style/index.ts). antd derives every element box from `controlHeight` and its \xB1steps; the same boxes here read the `--control-height` tier, so a skeleton button is exactly as tall as the Button it stands in for and follows density with it. The two RATIOS are antd's own multipliers (button = 2\xD7 the box, input = 5\xD7); they are unitless on purpose \u2014 a service widens the stand-in without leaving the height tier. gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--skeleton-button-width-ratio",value:"2",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-input-width-ratio",value:"5",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-node-size",value:"calc(var(--control-height) * 3)",description:"antd's node/image square is `controlHeight * 1.5 * 2`."},{name:"--skeleton-image-glyph-size",value:"var(--icon-size-4xl)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-image-glyph-color",value:"initial",description:"Role-mirror (#44): `initial` so the glyph re-resolves under a scoped theme. Default = hsl(var(--muted-foreground) / 0.4)."},{name:"--skeleton-article-avatar-gap",value:"var(--space-inline-lg)",description:"ARTICLE rhythm. antd: avatar gutter = `padding` (16), title offset beside an avatar = `marginSM` (12), title\u2192paragraph = `controlHeightSM` (24), line\u2192line = `controlHeightXS` (16). antd's fourth value \u2014 28px (`marginLG + marginXXS`) for title\u2192paragraph WITH an avatar \u2014 is not a step of this repo's spacing scale (it goes 24 \u2192 32), and docs/DESIGN-AUTHORITY.md says take a step or leave it rather than invent a number, so both cases take the 24px step."},{name:"--skeleton-article-avatar-title-offset",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-article-title-gap",value:"var(--space-stack-lg)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-article-line-gap",value:"var(--space-stack-md)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-paragraph-last-width",value:"61%",description:"antd's `li:last-child:not(:first-child):not(:nth-child(2))` short last line."},{name:"--skeleton-sweep-gradient",value:"initial",description:"The `active` sheen. One knob, not a from/to pair, so a service retunes the whole sweep once (#45); `initial` keeps the default resolving at the call site under a scoped theme (#44). Default = linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--border)) 37%, hsl(var(--muted)) 63%) \u2014 antd's three stops, on this library's neutral surfaces."},{name:"--query-load-more-space-block-start",value:"var(--space-stack-md)",description:'QUERY LIFECYCLE FOOTERS \u2014 the two rows `<InfiniteQueryState>` appends under a paginated feed: the "load more" button row and the "loading more\u2026" caption. Both gaps were Tailwind literals on the component (`pt-4` / `pt-2`), so a service running a denser (or airier) feed could not align them to its own vertical rhythm without forking the component (rule #45). They live in the feedback tier because these ARE query feedback surfaces and there is no query stylesheet. Defaults = var(--space-stack-md) (16px) and var(--space-stack-sm) (8px) \u2014 the exact values the Tailwind steps resolved to, so adopting this changes nothing until a theme opts in.'},{name:"--query-loading-more-space-block-start",value:"var(--space-stack-sm)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--query-auth-alert-max-inline-size",value:"36rem",description:"The sign-in fallback a query surface paints for an expired session when no AuthExpiryProvider handles it (gh#1022). An expired session is an expected, recoverable condition, so it is capped at a reading measure instead of spanning the page body its DataState wraps. `none` restores the full-width alert."},{name:"--tooltip-max-width",value:"20rem",description:"TOOLTIP \u2014 the transient label surface. Every constant here was a Tailwind literal baked into the component (`max-w-xs px-2 py-1 rounded-md text-xs shadow-md`), so a service could not retune tooltip density or measure without forking the component (rule #45). Defaults reproduce the previous look exactly, so adopting this changes nothing until a theme opts in."},{name:"--tooltip-space-inline",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-space-block",value:"var(--space-1)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--tooltip-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-shadow",value:"initial",description:"Raised-surface depth \u2014 role-mirror knob, so a flat service theme sets `none` once. `initial` rather than `var(--shadow-md)`: a `:root` binding to the ramp substitutes at `<html>` and a scope that restates the ramp can never reach it (docs/TOKEN-RESOLUTION.md \xA73, gh#880 item 7). The default resolves on `.ui-tooltip-content`. default = var(--shadow-md), resolved at the call site"},{name:"--tooltip-backdrop-blur-size",value:"initial",description:"GLASS (gh#880 item 1) \u2014 `initial`, so unset there is no blur and no backdrop root. A tooltip is the smallest surface in the system and sits over arbitrary content, so it follows \xA74's dropdown rule: if it is made translucent at all, it needs the most opaque fill of the family. Saturate is shared (`--surface-backdrop-saturate`). default = none \u2014 a tooltip blurs nothing"},{name:"--tooltip-background",value:"initial",description:'Surface colours \u2014 `initial` so the popover roles re-resolve at the CALL SITE under a scoped [data-tenant]/.dark theme (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Defaults = hsl(var(--popover)) fill \xB7 hsl(var(--popover-foreground)) text.'},{name:"--tooltip-foreground",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-border-color",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-border-color-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--popover-width",value:"18rem",description:"POPOVER \u2014 the interactive overlay panel. Same story as Tooltip: `w-72 rounded-md p-4 shadow-md` were literals, so a service could not align the panel to its own grid or width scale."},{name:"--popover-space-inset",value:"var(--space-4)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--popover-shadow",value:"initial",description:"`initial` + the ramp default at the call site \u2014 same freeze, same reason as --tooltip-shadow. default = var(--shadow-md), resolved at the call site"},{name:"--popover-backdrop-blur-size",value:"initial",description:"GLASS (gh#880 item 1) \u2014 `initial`, no blur and no backdrop root by default. This one carries a second warning: a Popover is a CONTAINER, so turning its blur on makes it the containing block for any `position: fixed` descendant it holds. default = none \u2014 a popover blurs nothing"},{name:"--popover-header-space-gap",value:"var(--space-1)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-header-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-surface-background",value:"initial",description:"Role-mirror knobs \u2014 `initial`, defaults resolve at the call site (see Tooltip above)."},{name:"--popover-surface-foreground",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-surface-border-color",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-surface-border-color-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--popover-surface-inline-size",value:"initial",description:"Width knob, for a panel that owns its own box \u2014 a time column pair, a calendar. The three colour knobs above already existed and padding already read `--popover-space-inset`; width was the one surface property left absolute, so a modifier could only reach it by re-declaring the property \u2014 which loses to import order (styles/__tests__/popover-surface-knob-cascade)."},{name:"--toast-icon-size",value:"var(--icon-size-md)",description:"TOAST (Sonner) \u2014 the status glyph in the toast's leading slot. WHY A KNOB AND NOT A UTILITY: sonner renders the toast body itself and takes the five status glyphs through ONE `icons={{ success, info, warning, error, loading }}` config prop. That prop is all-or-nothing \u2014 a consumer who wants a different glyph size must re-declare all five icons, re-importing lucide and re-deriving the aria wiring. Routing the size through a token makes it a one-line theme override instead (rule #45). Raw rem, not var(--space-N): it replaces a flat Tailwind `size-4` step, and the 16px box sonner gives `[data-icon]` is itself fixed \u2014 scaling the glyph with density alone would overflow it. NAMESPACE NOTE: sonner publishes its own `--toast-*` custom properties (--toast-icon-margin-*, --toast-svg-margin-*, --toast-button-margin-*, --toast-close-button-*). Neither name below collides with those; keep it that way when adding to this group."},{name:"--toast-background",value:"initial",description:"THE TOAST SURFACE (gh#880 item 1). Sonner paints the toast body itself from its own `--normal-bg`, which `sonner.tsx` sets to `hsl(var(--popover))`. That made the fill reachable only by re-declaring sonner's private variable, so this knob is the package's own name for it: the component now passes `var(--toast-background, hsl(var(--popover)))` through, and the default resolves in the browser, on the toaster, under whatever scope it is in. The blur goes on `[data-sonner-toast]` from `alert-layout.css`. `initial` = no blur and no backdrop root; a toast holds an action Button and a close \u2715, neither of which is `fixed`, but the rule is the rule. default = hsl(var(--popover)) at the call site"},{name:"--toast-backdrop-blur-size",value:"initial",description:"default = none \u2014 a toast blurs nothing"},{name:"--toast-mobile-offset",value:"16px",description:"Viewport gutter of the mobile toast stack. Sonner passes `mobileOffset` straight into inline CSS, so a var() string resolves normally. Flat 16px on purpose: this is a fixed inset from the device edge (thumb reach / safe area), not a density-scaled gap inside a surface."},{name:"--dialog-close-size",value:"var(--band-height-xl)",description:"Rule #24 companion for the overlay \u2715 (gh#1138): the 24px floor is the WCAG 2.5.8 AA minimum for a mouse; under a finger the target lifts to the 44px tap floor the control ladder already uses. Only the hit area grows (the `::after` above the glyph) \u2014 the 16px paint stays put."},{name:"--flex-surface-background",value:"initial",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--flex-surface-warning-alpha",value:"0.04",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--flex-surface-radius",value:"initial",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--flex-actions-offset-block",value:"initial",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--flex-actions-offset-inline",value:"initial",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--float-button-offset-block-end",value:"var(--space-stack-xl)",description:"THE TWO CORNER INSETS gh#558 ASKED FOR BY NAME. Ant Design's are `marginXXL` (48px) from the bottom and `marginLG` (24px) from the inline end. Spelled here in this library's own stack/inline steps, which land on the same two numbers: --space-stack-xl = --space-10 = 40px, --space-6 = 24px. The block inset is the one a service actually has to move \u2014 a sticky action bar, a cookie strip, a mobile tab bar all live in that corner \u2014 and moving it is now retuning ONE custom property, not writing a media query at the call site (which is `no-arbitrary-spacing` and has no legal spelling)."},{name:"--float-button-offset-inline-end",value:"var(--space-6)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-size",value:"var(--control-height-lg)",description:"The control box. antd's float button is `controlHeightLG` square (40px); this reads the same tier the rest of the library's large controls read, so a density switch moves it with them."},{name:"--float-button-min-block-size",value:"var(--control-height-lg)",description:"A square float button carrying a line of text keeps the WIDTH and grows on the block axis, which is antd's `height: auto`; this is the floor it grows from."},{name:"--float-button-padding-block",value:"var(--space-2)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-padding-inline",value:"var(--space-1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-icon-size",value:"var(--icon-size-md)",description:"The glyph. antd derives it as `fontSizeIcon * 1.5` = 18px; `--icon-size-md` is this library's step at that weight, and it is the step `Button` already gives an icon-only control."},{name:"--float-button-content-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"The line under the glyph, in the square shape. The smallest step, because it is a caption on a control, not body text."},{name:"--float-button-content-line-height",value:"var(--line-height-tight)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-shadow",value:"var(--shadow-lg)",description:"Elevation. The mark sits ABOVE the page, so it needs the shadow that says so; the same step Popover and DropdownMenu sit on."},{name:"--float-button-group-gap",value:"var(--space-stack-md)",description:"Gap between the buttons of an open group, and between the group's list and its trigger. antd uses `padding` (16px) for both, so one token answers both."},{name:"--float-button-group-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--float-button-badge-background",value:"initial",description:"The corner count/dot mark. `--float-button-badge-background` is `initial` so a scoped [data-tenant]/.dark theme that retunes --destructive still reaches the mark; the fallback is resolved at the call site in float-button-layout.css."},{name:"--float-button-badge-foreground",value:"hsl(var(--destructive-foreground))",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-size",value:"var(--space-4)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-padding-inline",value:"var(--space-1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-inset-block-start",value:"calc(var(--space-1) * -1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-inset-inline-end",value:"calc(var(--space-1) * -1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-dot-size",value:"var(--space-2)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-progress-offset",value:"0turn",description:"BackTop's `showProgress` ring. The component writes `--float-button-progress-offset: <n>turn` inline (a custom property, the sanctioned escape from `no-inline-magic-numbers`) and the ring is drawn from it with `conic-gradient` \u2014 no per-frame geometry ever reaches the call site."},{name:"--float-button-progress-width",value:"var(--space-1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-progress-color",value:"initial",description:"default = hsl(var(--primary)), resolved at the call site"},{name:"--float-button-progress-track-color",value:"hsl(var(--border))",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-motion-translate",value:"var(--float-button-size)",description:"How far a group's list travels on the way in. TIMING IS NOT HERE \u2014 `--duration-fast` and `--ease-standard` live in the motion tier (foundation.css) and the stylesheet reads them directly, the rule activity.css states: the component-token name shape has no property word for a duration, and a second copy of the motion scale is how the two drift apart."},{name:"--form-label-width",value:"8rem",description:"Fixed aligned label column by default (gh#284) \u2014 `max-content` sized each field's label column to its own label, so horizontal forms (especially columns={2} grids) had controls starting at ragged x positions. 8rem mirrors --descriptions-label-width so edit forms and show pages share the same optical grid; the Form/FormField `labelWidth` prop overrides."},{name:"--form-label-gap",value:"var(--space-4)",description:"Column gap between the label and its control in horizontal/inline layout. 16px"},{name:"--form-label-font-size",value:"var(--control-label-font-size, var(--text-sm))",description:'Type in the label column. Inherits the body size by default, so nothing moves unless a service opts in. It is a knob because the label column already is one: --form-label-width lets a service align forms to its grid, and a service whose grid was drawn around a smaller label had no way to say so \u2014 leaving it to hand-write font-size per label, which is exactly what the width token exists to prevent. CHAINED to the Label primitive\'s own knob (gh#824), where it used to read var(--text-sm) directly. FormField passes `text-[length:var(--form-label-font-size)]` on its Label, and a utility outranks `.ui-label { font-size: var(--control-label-font-size) }` in `@layer components` \u2014 so this was not an override of the broad knob, it was a SHADOW of it: a service that set --control-label-font-size moved its 4 standalone labels and none of its 21 FormField ones (measured at 1280px, 37px on :root -> 37px vs 14px). Reading the broad knob as the default makes this one an override again, which is what "a per-instance escape" meant. FREE: base.css declares --text-sm AS var(--font-size-sm), the step --control-label-font-size already read, so both sides are 0.875rem and nothing moves. 14px'},{name:"--form-block-gap",value:"var(--space-4)",description:"Row rhythm between a Form's own top-level blocks (gh#295) \u2014 e.g. the field group's CardContent and its CardFooter action row, or two FormFields that happen to be Form's OWN direct children (no Card framing). Unchanged from the historical value. 16px"},{name:"--form-feedback-icon-size",value:"var(--icon-size-sm)",description:"THE VALIDATION FEEDBACK GLYPH. It was `controlIconClass`, which is `size-[length:var(--control-height)]` \u2014 the height of a whole CONTROL, meant for something that fills a control-sized box like the ColorPicker swatch. On a `text-xs` feedback line that rendered a ~32px icon beside ~12px text, which is what a reader actually saw and reported. A glyph that sits inline with text belongs on the ICON scale, one step above the text it accompanies so it reads as a mark rather than a letter. 14px beside 12px text"},{name:"--form-field-row-gap",value:"var(--space-3)",description:"Field-to-field row rhythm (gh#295) \u2014 mirrors --descriptions-row-gap so a read-only value mixed in via `FormField.staticText` (gh#294) and a real Descriptions block share ONE canonical rhythm. Applied via margin-based sibling spacing on FormField itself (not Form's flex `gap`, which only reaches DIRECT children \u2014 dead in the common `Form > CardContent > FormField*` composition every real Save-button form needs), so it holds at any DOM depth relative to Form. 12px"},{name:"--form-grid-row-gap",value:"var(--form-field-row-gap)",description:"Row rhythm between the ROWS of a `<Form columns={n}>` grid (gh#304). The grid path cannot use the margin above \u2014 a per-item margin inside a grid double-counts the track gap AND leaves the first item of row 1 unshifted while its row-mates drop, so row 1's columns end up misaligned. The rhythm therefore rides the grid's own `row-gap`, and it DEFAULTS TO THE SAME --form-field-row-gap the stacked path uses so `columns={1}` \u2014 and every `columns={n}` form once it collapses to one column on a narrow container \u2014 is pixel-identical to a Form with no `columns` at all. Retune this alone only to give multi-column forms a looser row rhythm than stacked ones; retune --form-field-row-gap to move both together. 12px"},{name:"--form-grid-column-gap",value:"var(--space-4)",description:"Gutter between the COLUMNS of a `<Form columns={n}>` grid (gh#304). Was ResponsiveGrid's generic 16px stack gap with no way to say otherwise; it is a form's inter-field gutter and a service aligning forms to its design grid needs it as a knob (rule #45). The default keeps the historical 16px, so nothing moves unless a theme opts in. 16px"},{name:"--image-mask-background",value:"initial",description:"The hover/focus veil over the thumbnail. default = --overlay-background"},{name:"--image-mask-foreground",value:"initial",description:"default = hsl(var(--background))"},{name:"--image-mask-gap",value:"var(--space-1)",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-radius",value:"initial",description:"default = var(--radius)"},{name:"--image-preview-background",value:"initial",description:"The preview stage. default = --overlay-background, as antd's mask"},{name:"--image-preview-foreground",value:"initial",description:"default = hsl(var(--background))"},{name:"--image-preview-inset",value:"var(--space-4)",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-preview-gap",value:"var(--space-2)",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-preview-button-size",value:"2.5rem",description:"Every round control on the stage (close, prev/next, tools). \u2265 the 24px WCAG 2.5.8 floor."},{name:"--image-preview-button-background-alpha",value:"10%",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-preview-button-hover-background-alpha",value:"20%",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-preview-icon-size",value:"var(--icon-size-lg)",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--legal-document-measure-max-width",value:"46rem",description:"Readable document measure. Caps the header, the section column and the footer so a 1440px viewport still reads at ~75-90 characters per line."},{name:"--legal-document-column-gap",value:"var(--space-10)",description:"Rail \u2194 document column gutter (two-column mode only)."},{name:"--legal-document-toc-width",value:"15rem",description:"Sticky table-of-contents rail width (two-column mode only)."},{name:"--legal-document-toc-inset-block-start",value:"var(--space-6)",description:"Distance the pinned rail keeps from the top of the scrollport."},{name:"--legal-document-toc-max-height",value:"calc(100dvh - var(--space-12))",description:"Cap for a long contents list so the rail never outgrows the viewport."},{name:"--legal-document-toc-gap",value:"var(--space-1)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-item-padding",value:"var(--space-1) var(--space-2)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--legal-document-toc-title-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-marker-width",value:"initial",description:"Leading marker on the active contents entry \u2014 a non-colour affordance so the active state is never colour-only (WCAG 1.4.1). default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--legal-document-nav-gap",value:"var(--space-4)",description:"Gap between the `documentNavigation` slot and the contents list inside the rail."},{name:"--legal-document-header-gap",value:"var(--space-2)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-meta-gap",value:"var(--space-2)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-meta-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-section-gap",value:"var(--space-10)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-section-title-gap",value:"var(--space-3)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-body-line-height",value:"1.8",description:"Long-form leading \u2014 legal prose reads looser than UI text."},{name:"--legal-document-scroll-offset",value:"var(--space-6)",description:"`scroll-margin-block-start` on every section: the offset a hash jump / anchor activation leaves above the heading so it is not hidden under sticky chrome."},{name:"--legal-document-footer-gap",value:"var(--space-4)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-border",value:"none",description:"\u2500\u2500 Chrome \u2014 quiet by default (rule #44) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"},{name:"--legal-document-header-border",value:"none",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-footer-border",value:"none",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-meta-foreground",value:"initial",description:"\u2500\u2500 Role-mirror knobs \u2014 `initial` here, role default at the call site \u2500\u2500\u2500\u2500\u2500\u2500\u2500 default = hsl(var(--muted-foreground))"},{name:"--legal-document-summary-foreground",value:"initial",description:"default = hsl(var(--muted-foreground))"},{name:"--legal-document-toc-foreground",value:"initial",description:"default = hsl(var(--muted-foreground))"},{name:"--legal-document-toc-active-foreground",value:"initial",description:"default = hsl(var(--foreground))"},{name:"--legal-document-toc-active-background",value:"initial",description:"default = hsl(var(--accent))"},{name:"--legal-document-toc-marker-color",value:"initial",description:"default = hsl(var(--primary))"},{name:"--list-row-padding-y",value:"var(--space-3)",description:"ListRow component tokens \u2014 a single-line entity row for short lists inside a Card (sessions / API tokens / linked accounts / passkeys / notifications \u2026). Sits in a flush CardContent; rows separate with a quiet divider (#44 \u2014 chrome defaults to the calm semantic border)."},{name:"--list-row-padding-x",value:"var(--space-4)",description:"ListRow component tokens \u2014 a single-line entity row for short lists inside a Card (sessions / API tokens / linked accounts / passkeys / notifications \u2026). Sits in a flush CardContent; rows separate with a quiet divider (#44 \u2014 chrome defaults to the calm semantic border)."},{name:"--list-row-gap",value:"var(--space-3)",description:"ListRow component tokens \u2014 a single-line entity row for short lists inside a Card (sessions / API tokens / linked accounts / passkeys / notifications \u2026). Sits in a flush CardContent; rows separate with a quiet divider (#44 \u2014 chrome defaults to the calm semantic border)."},{name:"--list-row-border",value:"initial",description:"Row divider \u2014 `initial` so the --border default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root). Default = 1px solid hsl(var(--border))."},{name:"--list-row-body-min-width",value:"12rem",description:"Inline size the content column keeps before the trailing actions wrap onto their own line (#45 \u2014 a service retunes the stack threshold to its grid). Clamped with min(\u2026, 100%) at the call site, so a container narrower than the knob can never force page-root overflow (#224)."},{name:"--list-row-trailing-gap",value:"var(--space-2)",description:"Gap BETWEEN trailing actions \u2014 they also wrap among themselves at narrow widths (#224)."},{name:"--list-row-compact-padding-y",value:"initial",description:'\u2500\u2500 Compact inline-actions geometry (`density="compact"`, #246) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The canonical invitation / history row: a 36px leading avatar, a shrinkable title + description body and one or two small trailing Buttons, all on ONE line inside the canonical 358px card (326px content after the row\'s own inline inset) at a 390px viewport. These knobs only LOWER the geometry \u2014 the #224 wrap contract (row + trailing cluster wrap, body clamped with min(\u2026, 100%)) is untouched, so a cluster that genuinely cannot fit still wraps instead of widening the page root. Declared `initial` so the spacing defaults re-resolve at the CALL SITE \u2014 --space-2 is density-scaled and re-declared inside a `.ui-density-*` subtree, so a :root binding would freeze compact rows at the :root density (docs/TOKENS.md \u2014 the :root freeze rule). Defaults = var(--space-2) block padding \xB7 var(--list-row-padding-x) inline padding \xB7 var(--space-2) gap.'},{name:"--list-row-compact-padding-x",value:"initial",description:"Inline inset defaults to the default row axis so compact and default rows in the same Card keep one optical axis; a service retunes it to its own grid (#45)."},{name:"--list-row-compact-gap",value:"initial",description:"ListRow component tokens \u2014 a single-line entity row for short lists inside a Card (sessions / API tokens / linked accounts / passkeys / notifications \u2026). Sits in a flush CardContent; rows separate with a quiet divider (#44 \u2014 chrome defaults to the calm semantic border)."},{name:"--list-row-compact-body-min-width",value:"6rem",description:"Compact body threshold \u2014 small enough that avatar + body + two compact Buttons fit the canonical column (36 + 8 + 96 + 8 + 146 = 294 \u2264 326), and still a readable measure."},{name:"--list-row-read-background",value:"initial",description:"Read (default) row surface \u2014 `initial`, documented default = transparent, i.e. the Card surface shows through untouched (#44 \u2014 chrome defaults to the quietest state)."},{name:"--list-row-unread-background",value:"initial",description:"Unread emphasis surface (`unread` rows) \u2014 `initial` so the --muted default re-resolves at the call site under a scoped theme. Documented default = hsl(var(--muted)), the same quiet emphasis role the table header uses; it keeps the xs muted description line at WCAG AA (4.63:1 light / 5.47:1 dark), which hsl(var(--accent)) would not (4.23:1 light)."},{name:"--list-row-indicator-color",value:"initial",description:"Unread indicator dot fill \u2014 `initial` so the --primary default re-resolves at the call site under a scoped theme. Documented default = hsl(var(--primary))."},{name:"--list-row-indicator-size",value:"var(--space-2)",description:"Diameter of the read/unread indicator dot; the gutter is reserved on read rows too so the titles of a mixed list stay on one optical axis."},{name:"--logo-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--logo-size-xs",value:"1.25rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-size-sm",value:"1.5rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-size-md",value:"1.75rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-size-lg",value:"2.25rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-font-size-xs",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-font-size-sm",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-font-size-md",value:"var(--font-size-sm, var(--font-size-base))",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-font-size-lg",value:"var(--font-size-base)",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-success-background",value:"initial",description:'Semantic identity fill reads the --brand IDENTITY role: independent of --primary (a re-themed action colour never recolours the mark) AND of --success (the \u82E5\u7AF9 STATUS green stays on badges/progress/"saved" text \u2014 the mark used to borrow it and rendered \u0394E76 \u2248 17.5 off the canonical emerald, gh#250). Services retune the role once for every Logo. ROLE-MIRROR KNOBS \u2014 declared `initial` here with the role default at the CALL SITE (logo-layout.css), so a scoped `.dark` / `[data-tenant]` override of --brand actually reaches the mark instead of freezing at the :root value (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Documented defaults: --logo-success-background = hsl(var(--brand)) --logo-success-foreground = hsl(var(--logo-identity-foreground)) --logo-godx-color = hsl(var(--brand))'},{name:"--logo-success-foreground",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-color",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-identity-foreground",value:"60 33% 99%",description:'Identity-fill INK \u2014 the ink `mark="glyph"` sets its (caller-supplied) TEXT in when it sits on the --brand identity fill. This is deliberately NOT --brand-foreground. --brand-foreground is the identity artwork\'s KNOCKOUT colour, not an ink: it tracks --background in both themes (light 60 33% 99% = --background; dark 48 9% 9% = --background) because `<Logo mark="godx">` punches its inner bar as an evenodd HOLE and the email mark has to paint that hole as a solid fill to match. Negative space only has to clear WCAG 2.2 SC 1.4.11 (3:1, non-text) \u2014 and at 3.67:1 on the emerald it does. The boxed glyph is a different thing: it renders real TEXT, so SC 1.4.3 applies at 4.5:1 (14px bold is NOT "large text" \u2014 that needs 18.66px bold / 24px). THIS INK USED TO BE THEME-INVARIANT, AND THE VIOLET IDENTITY ENDED THAT. While --brand was \u7FE0 emerald the fill was light in BOTH themes, so one near-black ink cleared AA on both. Brand identity v2.3 makes the fill #7A00FF in light and #DCBCFF in dark \u2014 dark and light respectively \u2014 so a single ink cannot serve both: measured, near-black on the light-theme violet is 2.77:1, a real AA failure, while the same ink on the dark-theme violet is 10.72:1. So the ink now FLIPS with the theme, and each side is measured: light ink 60 33% 99% (#fdfdfb) on #7A00FF = 6.30:1 dark ink 48 9% 9% (#191815) on #DCBCFF = 10.72:1 The dark override lives HERE and not in foundation.css on purpose: `:root` and `.dark` have equal specificity, and tokens/base.css imports this file AFTER foundation.css \u2014 so a `.dark` rule there would lose to the `:root` rule here. Same file, later block, no ambiguity. A service that re-themes --brand to a fill of the opposite lightness overrides --logo-success-foreground (the public knob) to re-invert the ink. NOT a role-mirror knob: its default is a real value, not a role token, so there is no role to freeze at :root and the `initial` + call-site rule (docs/TOKENS.md) does not apply to it.'},{name:"--logo-godx-ink-color",value:"235 68.6% 13.7%",description:"\u2500\u2500 The LOGOTYPE ink (`<Logo mark=\"godx-lockup\" />`, identity v2.3) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The lockup's letters G, o and D are the kit's indigo #0B0F3B; the mark and the X are the brand identity colour and read --logo-godx-color instead. They are two ROLES, not a decorative split, so they get two knobs. A TOKEN AND NOT THE LITERAL, because the literal only works in one theme: #0B0F3B is 18.00:1 on the light canvas and 1.03:1 on the dark one \u2014 invisible. Dark takes the kit's own dark text colour instead (#F7FAF8, 16.87:1), flipped in the block at the end of this file the same way the boxed glyph's ink is."},{name:"--logo-glyph-cap-baseline-optical-offset",value:"-0.01em",description:'\u2500\u2500 Optical centring of the boxed GLYPH (`<Logo glyph="\u2026" />`, gh#370) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 A vertical nudge of the glyph\'s INK inside the mark box, in `em` so one value holds at every tier. Applied with `translate` (styles/logo-layout.css): the box, the fill and the layout are untouched, only the letterform moves. WHY THERE ARE FOUR. `place-items: center` centres a LINE BOX, and a line box is not a letterform. Every CSS rule available is ONE constant shift that cannot see which character it is moving, and the glyph classes do not share an optical centre: measured over Noto Sans JP, M PLUS 2, Hiragino Sans and the system stack \xD7 xs/sm/md/lg, their ink centres lie 0.21em apart. So the COMPONENT classifies the glyph string it was handed \u2014 the only layer that can \u2014 and emits `data-ink`; these are the per-band constants it selects between. The band is the (top edge, bottom edge) of the UNION of the string\'s ink, so `"gX"` is cap\u2192descender, not `"g"`\'s x-height\u2192descender. Every CJK and kana form counts as a cap-height top: the em box overshoots the cap band above the baseline and below it by about the same amount, so it centres where a capital does (measured -0.001em against -0.008em). MEASURED \u2014 worst |ink offset| from the box centre over 4 faces \xD7 4 tiers \xD7 the sample listed: cap-baseline -0.01em 1.38px G GX TH A 8 b kt J \u795E \u3042 \u30F3 \u30B4 \u795EA A\u3042 cap-descender -0.09em 1.25px gX Gy Bp hy \u795Eg g\u3042 \u6771y x-baseline -0.11em 0.88px x o xo ae s x-descender -0.21em 0.94px g y p q go Worst case 1.38px, against 2.25px for the best glyph-blind rule (`text-box: trim-both ex alphabetic`) and 3.94px untreated, on that same sample. The residual is within-band variation \u2014 kana do not all fill the em box (\u30B4 sits 0.04em above \u795E) \u2014 plus the half-pixel the browser snaps a line box by; no classifier can remove either.'},{name:"--logo-glyph-cap-descender-optical-offset",value:"-0.09em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-x-baseline-optical-offset",value:"-0.11em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-x-descender-optical-offset",value:"-0.21em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-optical-offset",value:"initial",description:"The escape hatch, for a mark none of the four bands fits \u2014 a face with unusual metrics, or a glyph the classifier cannot see (an inline `<svg>`, which is left unclassified on purpose). Set once and it PINS every band to that value. Declared `initial` (guaranteed-invalid) so it is inert by default and the per-band default at the CALL SITE wins \u2014 the same pattern as --logo-godx-size (docs/TOKENS.md). Documented default: --logo-glyph-optical-offset = the --logo-glyph-*-optical-offset for the band the glyph was classified into, or 0 when it was not classified."},{name:"--logo-glyph-fullwidth-width",value:"1",description:"\u2500\u2500 Fitting the glyph to the mark box (`<Logo glyph=\"\u6771\u4EAC\" size=\"xs\" />`, gh#377) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 `.ui-logo` is a fixed square and the glyph was set at a fixed per-tier font-size, so nothing related the string's INLINE ADVANCE to the box it had to fit in. A full-width form occupies a whole em, and CJK offers a line-break opportunity between EVERY pair of ideographs \u2014 so two kanji in the 20px `xs` box did not overflow, they WRAPPED into a two-line mark. Latin never showed this because a Latin word has no interior break opportunity: it silently spilled instead. Measured across Noto Sans JP / M PLUS 2 / Hiragino Sans / the system stack \xD7 the four tiers, the wrap hit \u6771\u4EAC \u795E\u6238 \u30B4\u30B8 \u682A\u5F0F at xs and sm, \u6771\u4EAC\u90FD at every tier, and \u2014 already inside the gh#370 sample \u2014 \u795EA and A\u3042 on Hiragino at xs. THE FIX IS THE SAME SHAPE AS gh#370. CSS cannot see the string, so it cannot know what advance to make room for; the COMPONENT can. It counts the string's characters in four classes and emits them as --logo-glyph-fullwidth-count / --logo-glyph-wide-count / --logo-glyph-narrow-count / --logo-glyph-space-count (pure, no measurement, no layout read, SSR-safe). styles/logo-layout.css turns those counts into a modelled advance and caps the glyph's font-size at the size that advance fits in \u2014 `min()`, so a mark whose advance already fits keeps its tier font-size EXACTLY and nothing that renders correctly today moves. `white-space: nowrap` sits under it as the invariant: a brand mark is one line. EACH CONSTANT IS AN UPPER BOUND OF ITS CLASS \u2014 that is the entire contract. Over-stating an advance sets the mark a little smaller than it had to be; under-stating it puts the mark OUTSIDE the box, which is the defect this whole mechanism exists to remove. The first cut carried one constant for every proportional form and dropped white space from the count, and both under-states shipped as spill (`WW` 3.50px, `\u6771 \u4EAC` 2.63px \u2014 see below). THE INVARIANT, stated as the gate asserts it: for every mark, at every tier, on every bundled face, the FITTED font-size times the PAINTED advance stays inside the box. Not \"each constant bounds its class in isolation\" \u2014 see the recorded slack below. MEASURED advance in em, per character, max over the four faces (a DOM advance read at 200px, never a canvas `fillText`: that substitutes a fallback face for a webfont): full-width form 1 \u2190 1.000 \u795E \xB7 \u6771 \xB7 \u3042 \xB7 \u30B4 \xB7 \u682A \xB7 \u300C \xB7 \u3001 \xB7 \uFF27, every one 1.0000 em-wide Latin 1.06 \u2190 1.058 W 1.0580 \xB7 m 1.0100 \xB7 M 0.9870 \u2014 all Hiragino Sans other Latin/digit 0.81 \u2190 0.863 w 0.8630 \xB7 O/Q 0.8380 \xB7 U 0.8291 \xB7 H 0.8260 \xB7 N 0.8210 \xB7 X 0.8110 \xB7 8 0.7120 \xB7 k/t 0.5435 \xB7 l 0.3150 collapsible space 0.34 \u2190 0.333 Hiragino 0.3330 \xB7 M PLUS 2 0.2730 \xB7 Noto 0.2270 \xB7 system 0.1978 `M W m` get a class of their own because they REACH the full-width em \u2014 `W` passes it, at 1.058em WIDER than a kanji \u2014 so no proportional constant holds them without shrinking every other Latin mark to fit. With them out of the way the narrow class stays at 0.81. RECORDED SLACK, not an oversight: six forms (w \xB7 O \xB7 Q \xB7 U \xB7 H \xB7 N \xB7 X) measure 0.811\u20130.863em, above the 0.81 constant, by at most 0.053em. Measured, none of them reaches the box edge at its tier's font-size \u2014 `ww` at xs paints 19.2px of a 20px box \u2014 so raising the constant to 0.87 would shrink 120 of 480 measured cells to buy nothing, against this file's own rule that a mark which already fits keeps its tier font-size to the byte. The gate re-derives the margin from the shipped tokens, so a change to the type scale or the box ramp re-tests it rather than inheriting this conclusion. --logo-glyph-fit-max-width is the share of the box a FITTED glyph's modelled advance may take. 0.95 leaves 0.50px (xs) / 0.60px (sm) / 0.70px (md) of fill clear of the modelled ink on each side of a two-kanji mark \u2014 measured on the paint, 0.50\u20131.50px at xs across the four faces, against the 0.5px minimum the library already ships (\u795EA on M PLUS 2 at xs). It is a CAP, not a target: it only binds on the marks that do not fit."},{name:"--logo-glyph-wide-width",value:"1.06",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-narrow-width",value:"0.81",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-space-width",value:"0.34",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-fit-max-width",value:"0.95",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-size-xs",value:"1.5rem",description:'\u2500\u2500 Identity-mark box (`<Logo mark="godx" />`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The `size` prop drives the identity mark exactly like it drives the boxed glyph \u2014 a public prop that renders identically at every tier is a silent no-op, and the godx LOCKUP already scaled its wordmark per tier, so a fixed mark broke the mark\u2194wordmark proportion at `size="lg"` (gh#163 follow-up). The godx artwork is a horizontal capsule inside a square viewBox, so it carries less optical weight than the fully-filled glyph box: each tier sits +0.25rem above its --logo-size-* sibling. `md` is 2rem \u2014 the historical fixed value \u2014 so every existing default-size identity surface renders byte-identically. --logo-godx-size is the PIN: declared `initial` (guaranteed-invalid) here with the per-tier default at the CALL SITE (logo-layout.css), so it is inert by default and a service that sets it once freezes the mark at that box on EVERY tier \u2014 the same call-site pattern the role-mirror colour knobs use (docs/TOKENS.md). Retune a single tier via --logo-godx-size-*. Documented default: --logo-godx-size = unset (tiers apply).'},{name:"--logo-godx-size-sm",value:"1.75rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-size-md",value:"2rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-size-lg",value:"2.5rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-size",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-gap",value:"var(--space-2)",description:'\u2500\u2500 Wordmark / lockup (`<Logo wordmark="GoDX" />`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The readable product name set beside the mark. The package ships NO wordmark artwork: the wordmark is typeset in the design-system display face, so a service retunes face, weight, tracking, size and the mark\u2194wordmark gap here instead of writing page CSS. The colour is a role-mirror knob whose default is the IDENTITY role --brand (never --primary, never the --success status green): the GoDX/`success` lockup is canonical emerald out of the box, and every other lockup reads --foreground. Documented defaults: --logo-wordmark-font-family = var(--font-family-display); --logo-wordmark-color = hsl(var(--foreground)), or hsl(var(--brand)) on the godx / tone="success" lockup.'},{name:"--logo-wordmark-font-size-xs",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-size-sm",value:"var(--font-size-sm, var(--font-size-base))",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-size-md",value:"var(--font-size-base)",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-size-lg",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-weight",value:"700",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-letter-spacing",value:"-0.01em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-family",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-color",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-divider-width",value:"initial",description:'\u2500\u2500 The PRODUCT SUFFIX (`<Logo mark="godx-lockup" productSuffix="ID" />`, gh#649) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 "GoDX | ID" \u2014 the brand lockup followed by a rule and the name of ONE product. Later also "GoDX | Console", "GoDX | Admin", and each of those localized. WHY THE SUFFIX IS TYPESET AND NOT DRAWN. The kit hands over "GoDX | ID" as a single flattened lockup in its own coordinate space (`0 0 1234 242`, against this package\'s `30 30 871.29 182`), so shipping it would put a SECOND master next to the one above \u2014 different box, different gradients, its own `id="title"`/`id="desc"`, its own hardcoded `#0B0F3B` ink and `#C5C8D6` rule. That is four of the defects gh#649 was opened about, and it buys nothing that survives the next product: a drawn suffix means one more master, one more release and one more dark variant for every name that is ever added, and it cannot be localized at all. So the suffix is TEXT \u2014 the same decision, and the same tokens, the readable `wordmark` already uses. The brand\'s own construction (the G, the arrow, the "GoDX" logotype, the golden ratio between them) stays untouched inside the master; a PRODUCT NAME is not part of that construction. SIZE / FACE / TRACKING ARE THE WORDMARK\'S, ON PURPOSE. The suffix sits on the same baseline, in the same lockup, at the same optical level as the wordmark, so it reads --logo-wordmark-font-size-* / --logo-wordmark-font-family / --logo-wordmark-letter-spacing rather than growing a parallel ramp a service would then have to keep in step. Only the two knobs whose ROLE differs get their own token: the suffix is not the brand logotype, so it is set in UI ink (--foreground) at a lighter weight, and "GoDX" stays the dominant word. THE RULE. --logo-divider-height is `1em` of the suffix\'s own type, so the tick is exactly as tall as the word it separates at every tier with no per-tier token: 12.5 / 14 / 14 / 17.6px against a 24 / 28 / 32 / 40px lockup box. ITS COLOUR IS THE LOGOTYPE\'S INK AT 0.25 ALPHA, NOT A GREY AND NOT --border. Measured on the shipped tokens: light #0B0F3B at 0.25 over --background #fdfdfb \u2192 #c1c2cb, 1.74:1 the kit\'s hardcoded rule #c5c8d6 \u2192 1.64:1 (\u0394RGB \u2264 11, no dark counterpart) --border (the table-grid hairline) \u2192 1.15:1 (its own note above records this) dark #F7FAF8 at 0.25 over --background #191815 \u2192 #515150, 2.30:1 So the rule lands on the kit\'s grey in the theme the kit drew it for, and \u2014 unlike the literal \u2014 it has a dark theme at all, because it is derived from --logo-godx-ink-color, which already flips. ALPHA rather than a mix with --background, so the rule is still correct on a coloured topbar. Nothing here is WCAG-load-bearing: SC 1.4.11 exempts a part of a logo or brand name. ROLE-MIRROR KNOBS \u2014 `initial` here, role default at the CALL SITE (docs/TOKENS.md). Documented defaults: --logo-divider-color = var(--logo-godx-ink-color) --logo-product-suffix-color = hsl(var(--foreground)) default = var(--stroke-hairline), resolved at the call site (gh#906)'},{name:"--logo-divider-height",value:"1em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-divider-alpha",value:"0.25",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-divider-color",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-product-suffix-gap",value:"var(--space-2)",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-product-suffix-font-weight",value:"500",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-product-suffix-color",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-identity-foreground",value:"48 9% 9%",description:"The other half of the ink flip above \u2014 see --logo-identity-foreground. The dark fill is the LIGHT violet, so the glyph goes back to the near-black spine (10.72:1)."},{name:"--logo-godx-ink-color",value:"140 23.1% 97.5%",description:"The kit's dark text colour \u2014 #F7FAF8, 16.87:1 on the dark canvas."},{name:"--marquee-gap-inline",value:"var(--space-inline-lg)",description:"Space between items inside one copy AND between copies \u2014 they are the same rhythm, so they are one knob. The trailing gap is painted as the copy's own `padding-inline-end`, which is what makes the seam between two copies indistinguishable from the seam between two items. The `gap` prop overrides it per instance; this is the resting value a service sets once."},{name:"--marquee-mask-width",value:"var(--space-10)",description:'Width of the fade at each edge under `fade`. A MASK, so it reveals whatever the surface behind it is \u2014 the prior art paints an opaque `gradientColor` (default "white"), which is a white smear on a dark theme.'},{name:"--masonry-gap-inline",value:"0px",description:"Resting spacing between tiles, per axis, when the `gap` prop is omitted. Ant Design's `gutter` defaults to `0` and this ports that default exactly \u2014 a service that wants every masonry in the product to breathe sets these two once in its theme.css, and a per-instance `gap` still wins. The packer READS the resolved `row-gap` back off the container, so this token (or the `gap` prop that overrides it) is the single source for both the painted spacing and the arithmetic. There is no second number in the TypeScript."},{name:"--masonry-gap-block",value:"0px",description:"Masonry component tokens \u2014 Ant Design `Masonry` (6.0.0): tiles of unequal height packed into columns. antd retunes this surface through `classNames` / `styles` semantic maps. Those are deliberately not ported (cardinal rules #44/#45, docs/DESIGN-AUTHORITY.md \u2014 \"a knob that only a fork could reach is not parity either\"); this file is the answer instead. TIMING IS NOT HERE. The re-flow and the appear fade read `--duration-base` / `--ease-standard` from the motion tier (src/tokens/foundation.css), because the component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration and a second copy of the motion scale is how the two drift apart \u2014 the same note `float-button.css` and `activity.css` carry. The COLUMN COUNT is not a token. It is `columns`, a prop, because a masonry's column count is the call site's decision about that collection and not a global design knob."},{name:"--mega-menu-bar-gap",value:"var(--space-inline-xs)",description:"Bar"},{name:"--mega-menu-trigger-height",value:"var(--control-height)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-padding-x",value:"var(--space-3)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-gap",value:"var(--space-inline-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--mega-menu-trigger-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-foreground",value:"hsl(var(--foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-background",value:"transparent",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-hover-background",value:"initial",description:"ROLE-MIRROR KNOBS \u2014 `initial`, NOT `hsl(var(--accent))` (gh#687, docs/TOKENS.md). A tier that binds to a tenant-scoped role computes ONCE at `:root` and every descendant inherits that computed colour, so a `[data-tenant]` block redefining `--accent` would leave this bar on the root brand while its neighbours followed. The knob stays empty here and the role is the FALLBACK at the call site in styles/navigation-layout.css, which re-resolves per scope. Documented defaults: hover/open = accent on accent-foreground, current = primary."},{name:"--mega-menu-trigger-hover-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--mega-menu-trigger-hover-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-open-background",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-open-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-current-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-disabled-alpha",value:"0.5",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-expand-icon-size",value:"var(--control-icon-size-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-background",value:"hsl(var(--popover))",description:"Panel surface"},{name:"--mega-menu-panel-foreground",value:"hsl(var(--popover-foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-border-color",value:"hsl(var(--border))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--mega-menu-panel-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--mega-menu-panel-padding",value:"var(--space-6)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-shadow",value:"var(--shadow-md)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-offset",value:"0px",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-max-height",value:"70vh",description:"A forty-link panel must not run off the bottom of a laptop; past this it scrolls in the block axis and nothing is unreachable."},{name:"--mega-menu-panel-translate",value:"var(--space-1)",description:"Travel of the open animation. Zeroed under prefers-reduced-motion, where the panel SNAPS into place \u2014 it is never removed, only un-animated."},{name:"--mega-menu-groups-gap",value:"var(--space-6)",description:"Panel columns"},{name:"--mega-menu-group-gap",value:"var(--space-inline-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-min-width",value:"12rem",description:"A column may not get narrower than this before the grid drops to fewer columns; this is what keeps a 40-link panel readable instead of pouring it into one ribbon."},{name:"--mega-menu-group-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-label-foreground",value:"hsl(var(--muted-foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-description-foreground",value:"hsl(var(--muted-foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-icon-size",value:"var(--control-icon-size-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-gap",value:"var(--space-inline-sm)",description:"Panel rows"},{name:"--mega-menu-link-padding-x",value:"var(--space-2)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-padding-y",value:"var(--space-2)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--mega-menu-link-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-foreground",value:"hsl(var(--foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-hover-background",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-hover-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--mega-menu-link-hover-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-current-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-description-foreground",value:"hsl(var(--muted-foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-icon-size",value:"var(--control-icon-size-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-min-height",value:"var(--touch-target-min)",description:"A nav row is a WCAG 2.2 SC 2.5.8 target: the AA floor, scale-exempt like the token itself."},{name:"--mega-menu-panel-footer-gap",value:"var(--space-4)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-footer-border-color",value:"hsl(var(--border))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--pagination-gap",value:"var(--space-inline-sm)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--pagination-item-gap",value:"var(--space-inline-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--pagination-size-width",value:"5.5rem",description:"Size-changer trigger MIN width (gh#286) - the trigger sizes to its content (w-max) so localized labels (ja 100/\u30DA\u30FC\u30B8) never clip; this token only keeps short labels from collapsing below the control rhythm."},{name:"--pagination-page-padding-x",value:"var(--space-1)",description:"Inline padding on a page button. The button keeps min-width: var(--control-height), so this only takes effect once a number outgrows that box. Deliberately --space-1 rather than --space-2: at the wider value a two-digit label (14.8px of text + 2 * 8px + 2px border) came to 32.8px and pushed the common 1\u20132 digit buttons off square by 0.8px."},{name:"--pagination-total-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--pagination-icon-size",value:"var(--control-icon-size)",description:'Chevron glyph inside the `simple` form\'s Prev/Next Buttons (#319). Those are size="sm" Buttons, so `.ui-button--sm svg` would draw them at --control-icon-size-sm; the component pinned them larger with a literal `size-4` class instead, because in simple mode the chevron IS the control \u2014 there is no label beside it to carry the affordance. The knob keeps that deliberate override themeable (rule #45) and tracks the default control-icon tier, so it now follows density like every other control glyph instead of staying a flat 1rem.'},{name:"--pagination-control-height-sm",value:"initial",description:'Ant Design `size="small"`. Retuned as ONE local --control-height on the bar, so the page buttons, the size-changer trigger and the quick-jumper field shrink together instead of each carrying its own tier \u2014 exactly how a service would retune the whole footer. Declared `initial` (gh#705): the documented default is `var(--control-height-sm)`, resolved at the bar, so a small pager inside a density scope (a compact DataTable, whose toolbar Buttons are 25.76px) sits on the same step as its neighbours instead of a frozen 28px band.'},{name:"--pagination-jumper-gap",value:"var(--space-inline-xs)",description:"Ant Design `showQuickJumper`. The field is sized to a page NUMBER, not to a sentence, so it gets its own width rather than the shared control measure."},{name:"--pagination-jumper-width",value:"4rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--pagination-jumper-font-size",value:"var(--pagination-total-font-size)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-gap",value:"var(--space-3)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-padding-y",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-picker-width-sm",value:"11rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-picker-width-md",value:"14rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-item-gap",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-separator-size",value:"var(--control-icon-size-sm)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-index-font-weight",value:"var(--font-weight-bold)",description:"Inline-step emphasis (gh#12). The step number's weight and tint are separate knobs so a service can express progression the canonical way \u2014 an accent TINT at normal weight \u2014 instead of the original bold. --steps-inline-index-color / --steps-inline-separator-color are role-mirror knobs (docs/TOKENS.md): `initial` so their defaults (the inherited step colour and the --muted-foreground role) resolve at the CALL SITE and a scoped [data-tenant]/.dark override still reaches them. Defaults reproduce today's row byte for byte."},{name:"--steps-inline-index-color",value:"initial",description:"default = currentColor at the call site"},{name:"--steps-inline-separator-color",value:"initial",description:"default = hsl(var(--muted-foreground))"},{name:"--app-setting-picker-compact-control-height",value:"var(--control-height-sm)",description:"AppSettingPicker `compact` (gh#217) \u2014 the small, content-hugging labelled trigger used in an auth/legal footer, where the square icon-only default reads as a stray button and the full labelled trigger is too tall. Box height comes from the official --control-height-sm tier (never a literal / ad-hoc calc), and every other knob is themeable (rule #45)."},{name:"--app-setting-picker-compact-padding-x",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-compact-gap",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-compact-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--breadcrumb-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--breadcrumb-menu-trigger-gap",value:"var(--space-inline-xs)",description:"Ant Design `BreadcrumbItemType.menu` \u2014 the sibling picker hung off a segment. The trigger is the segment's own text plus a disclosure chevron, so it only needs the gap between them."},{name:"--breadcrumb-item-max-inline-size",value:"none",description:"`BreadcrumbItemProp.ellipsis` (gh#1046) \u2014 the widest a truncating crumb may grow. `none` = it only cuts when the one-line trail runs out of room; a theme may cap it (e.g. `16em`)."},{name:"--menu-shortcut-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-list-max-inline-size",value:"100%",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-list-overflow",value:"auto",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-list-background",value:"initial",description:'THE DEFAULT STRIP\'S TRACK AND ITS SELECTED SLAB (gh#880 item 3) \u2014 the pair whose absence was the defect the owner spotted by eye: a translucent Card whose Tabs strip stayed opaque `--muted`, so "c\xE1c card n\xE0y c\xF3 \u0111\u1ED3ng b\u1ED9 \u0111\xE9o \u0111\xE2u". Both used to be Tailwind utilities on the component (`data-[variant=default]:bg-muted` on the list, `data-[state=active]:bg-background` on the trigger), i.e. `@layer utilities`, which outranks every rule this package can write \u2014 the strip was not merely un-knobbed, it was unreachable. `--segmented-track-background` / `--segmented-item-selected-background` are the SAME track-and-slab pair and have been knobs since gh#848; `segmented.css` says in so many words that its role ports "are the ones `Tabs` ALREADY MADE". So these two are named after that pair and default to exactly the roles the utilities painted. `initial` with the default at the call site, for the reason that file measured: written `var(--muted)` here the binding substitutes on `<html>` and a scope below root inherits the root\'s answer, which reads as correct only because `.dark` also lands on `<html>`. default = hsl(var(--muted)) at the call site'},{name:"--tabs-list-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tabs-trigger-active-background",value:"initial",description:"default = hsl(var(--background)) at the call site"},{name:"--tabs-trigger-active-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tabs-placement-responsive-breakpoint-width",value:"48rem",description:'Width at or below which `tabPlacement="start"`/`"end"` folds to `top`/`bottom` (gh#502) \u2014 a vertical strip and its panel share one inline axis and a phone has room for one of them. Same line `--sheet-responsive-breakpoint-width` draws; `0px` (which no viewport matches) turns the fold off. Read in JS (src/lib/breakpoint-token.ts) because the fold also swaps which arrow keys move the roving focus \u2014 see the note on `foldVerticalPlacement` in navigation/tabs.tsx.'},{name:"--tabs-indicator-background",value:"initial",description:"Tabs `line` active indicator (gh#248) \u2014 the ONLY selected-state decoration the line variant paints. The surrounding active ring belongs to the default/card lists, so `:focus-visible` keeps its own distinct keyboard ring here (WCAG 2.4.7). `--tabs-indicator-background` is a role-mirror knob: `initial` so hsl(var(--primary)) re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding to a role var would freeze at :root). Default = hsl(var(--primary)) \xB7 2px thick \xB7 flush with the trigger edge (offset 0 = quietest, rule #44); a service raises the offset to park the bar on a thicker strip hairline."},{name:"--tabs-indicator-size",value:"2px",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-indicator-offset",value:"0px",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-indicator-inset",value:"0px",description:"Ant Design `indicator.size` \u2014 the bar's LENGTH along the strip, as the inset it leaves at EACH end of the trigger. `0px` = antd's own default (`getLength` returns `origin`, the tab's whole offset width), so the default paint does not move. `indicator={{ size: \"label\" }}` on the component repoints this at the trigger's own inline/block padding, which is what `size: (origin) => origin - 2 * padding` is written to produce upstream (@rc-component/tabs src/hooks/useIndicator.ts)."},{name:"--tabs-root-gap",value:"0.5rem",description:"Gap between the tab strip and the panel below it."},{name:"--tabs-list-line-space-inset",value:"0px",description:"Inset of the `line` strip. The default/pill strip keeps its own padding box; the line strip is a flat underlined rail, so its default is the quietest value \u2014 none (rule #44). Raise it to give the rail breathing room above its hairline."},{name:"--tabs-list-line-space-gap",value:"0.25rem",description:"GUTTER BETWEEN TRIGGERS on the `line` strip \u2014 Ant Design's `tabBarGutter`, which is declined as a PROP and lives here instead (cardinal rules #44/#45): a number of pixels handed straight to the caller is not a semantic axis, it is a constant, and a constant belongs to the theme. A RAW rem, not `var(--space-1)` \u2014 the same rule the block above states and for the same reason: `gap-1` reads Tailwind's own --spacing grid, which this repo does NOT density-scale, so a --space-* default would silently widen the gutter under a comfortable density. 0.25rem is byte for byte what `gap-1` resolved to, so no strip moves. A service that wants the gutter to follow density points this at var(--space-1) itself. The other two strips already had their knob: the card strip reads `--tabs-card-list-space-gap`, and the pill strip has no gutter at all by design (its triggers are `flex-1` inside one padded box). This was the one strip a service could only retune by forking the class list. scale-exempt: it must equal what the `gap-1` it replaces painted. --space-1 is 0.25rem at the default density but calc(0.25rem * var(--scaling)) under any other, and Tailwind's own --spacing grid \u2014 which this repo does not density-scale \u2014 is what the strip was drawn against. Binding it to the step would move a gutter this commit exists not to move."},{name:"--tabs-list-focus-ring-space-inset",value:"initial",description:"BLOCK HEADROOM FOR THE FOCUS RING (gh#376). The horizontal strip is a scroll container (`overflow-x: auto` + `overflow-y: hidden`), and a block-axis clip shaves whatever a trigger paints outside its own box \u2014 measured in Chromium, the `line` strip gives its triggers 0px of block headroom, so the entire focus ring was cut off top and bottom. The headroom has to come from LAYOUT, not from relaxing the clip: `overflow-y: visible` beside `overflow-x: auto` computes back to `auto` per spec (a second scroll container, not a ring), and Chromium honours `overflow-clip-margin` only when BOTH axes are `clip`, so a single-axis clip silently drops it. The strip therefore pads its block axis by the ring's outer reach and pulls the same amount back with a negative block margin, so the ring paints INSIDE the scrollport while the strip occupies exactly the space it did before. `initial` (the role-mirror rule in docs/TOKENS.md, not a :root binding) because the default is derived from `--focus-ring-*`, which components and tenants DO re-scope; binding it at :root would freeze the headroom while the ring it is sized from moved. Documented default = `calc(var(--focus-ring-width) + var(--focus-ring-glow-width))` \u2014 the ring's outer reach, read at the call site so the two can never disagree."},{name:"--tabs-trigger-line-radius",value:"0px",description:"`line` trigger box. Square corners because the selected state is the token-owned ::after bar, never a pill; the hit box is wider/taller than the pill trigger so the underline spans a real column of the rail."},{name:"--tabs-trigger-line-padding-x",value:"1rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-line-padding-y",value:"0.5rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-height-sm",value:"var(--band-height-sm)",description:"TABS SIZE TIERS \u2014 Ant Design's `size` (`small`/`middle`/`large`) expressed as this library's own control bands, so a tab strip and the Buttons beside it land on the same rhythm instead of on antd's 24/32/40 ladder. `md` reproduces today's trigger exactly: `--band-height-md` is the default control band and `--font-size-base` is what the `text-sm` step already resolved to."},{name:"--tabs-trigger-height-md",value:"var(--band-height-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-height-lg",value:"var(--band-height-lg)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-font-size-sm",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-font-size-md",value:"var(--font-size-base)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-font-size-lg",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-padding-x-sm",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-padding-x-md",value:"var(--space-3)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-padding-x-lg",value:"var(--space-4)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-card-list-radius",value:"0px",description:'TABS CARD FACE (`variant="card"` / `"editable-card"`). The strip loses the pill container \u2014 transparent, no inset, no radius \u2014 and gains a rail its tabs sit on; each tab becomes a boxed face rounded on the leading block edge only, and the ACTIVE one drops its block-end edge so it reads as joined to the panel. `--tabs-card-background` is a role-mirror knob (docs/TOKENS.md): `initial` so the --muted default re-resolves at the CALL SITE under a scoped [data-tenant] or .dark theme instead of freezing at :root.'},{name:"--tabs-card-list-space-inset",value:"0px",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-card-list-space-gap",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-card-radius",value:"var(--radius-md, calc(var(--radius) / var(--radius-ratio)))",description:"Read via `rounded-s-[var(--tabs-card-radius)]` / `rounded-e-[var(--tabs-card-radius)]` in tabs.tsx \u2014 a Tailwind utility (`@layer utilities`) this package cannot hand a fallback to from CSS, so (same reasoning as `--button-radius` in control.css) this stays a plain :root binding rather than `initial`. The `var(--radius-md, \u2026)` fallback is gh#888: without it, the tier's global unfreeze leaves `--radius-md` unset and this \u2014 and every card-variant Tab corner \u2014 would go to 0. The formula keeps the declaration byte-identical to before gh#888."},{name:"--tabs-card-rail-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--tabs-card-background",value:"initial",description:"default = var(--muted) at the call site"},{name:"--tabs-card-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--tabs-panel-background",value:"initial",description:"TABS JOINED BODY (`bodied`, gh#762). The card strip alone is half an object: antd's active face repaints the edge FACING the panel in the surface colour, which only reads as \"opened into\" when there IS a surface under it \u2014 and the package shipped no such body, so every consumer picked a box and every box was wrong (measured on 28.0.0: `<Card>` 8px gap + a second 1px border at a 9.7px radius, `<Card variant=\"borderless\">` 8px gap, no box 8px gap). `--tabs-panel-background` is a role-mirror knob (docs/TOKENS.md): `initial` so the --background default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme. It is read BOTH by the body and by the active card face's merged edge, so the two can never disagree \u2014 a theme that retints the body retints the tab that opens into it. The radius mirrors the tab's own (`--tabs-card-radius`), because the body and the faces are two halves of one outline; the border width mirrors the rail's, for the same reason. default = var(--background) at the call site"},{name:"--tabs-panel-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--tabs-panel-border-width",value:"var(--tabs-card-rail-border-width, var(--stroke-hairline))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-panel-radius",value:"initial",description:"`initial`, not `var(--tabs-card-radius)` \u2014 a :root binding freezes (gh#888); default resolves at the call site. Default = var(--tabs-card-radius)."},{name:"--tabs-panel-space-inset",value:"var(--space-4)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-min-width",value:"var(--space-4)",description:"TAB COUNTER PILL (`TabItemProp.count`, gh#762) \u2014 the SAME counter Button and Toggle already draw, so \u300C\u672A\u5BFE\u5FDC 12\u300D on a tab and on a filter chip are one thing at one size. Values mirror `--toggle-count-*` verbatim; the two tints are role-mirror knobs (`initial` + a call-site fallback) so a scoped theme re-resolves them."},{name:"--tabs-count-space-inline",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-gap",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-radius",value:"var(--radius-pill)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-background",value:"initial",description:"default = hsl(var(--muted)) at the call site"},{name:"--tabs-count-card-background",value:"initial",description:"\u2026and on a CARD tab, whose own resting fill is already `--muted`, the pill would land on its own colour (measured 1.00:1 \u2014 invisible; the gh#602 failure on a third control). It takes the page surface there, exactly as `.ui-toggle-soft .ui-toggle-count` does. default = hsl(var(--background)) at the call site"},{name:"--tabs-count-color",value:"initial",description:"default = hsl(var(--muted-foreground)) at the call site"},{name:"--tabs-count-active-background",value:"initial",description:"default = hsl(var(--primary)) at the call site"},{name:"--tabs-count-active-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tabs-count-active-color",value:"initial",description:"default = hsl(var(--primary-foreground)) at the call site"},{name:"--tabs-count-forced-outline-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--tabs-bar-gap",value:"var(--space-2)",description:"TABS BAR ROW \u2014 the one inline run that holds the strip, the `editable-card` add button and the `extra` (antd `tabBarExtraContent`) slots."},{name:"--tabs-extra-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-overflow-size",value:"var(--band-height-md)",description:'OVERFLOW MENU TRIGGER (`overflow="menu"`, antd `more`). Sized off the same control band as the add button so the two affordances that flank the strip land on one rhythm; unlike the add button it draws no card face, because it is bar chrome rather than a tab.'},{name:"--tabs-overflow-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--tabs-overflow-icon-size",value:"var(--control-icon-size)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-add-size",value:"var(--band-height-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-add-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--tabs-add-icon-size",value:"var(--control-icon-size)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-icon-size",value:"var(--control-icon-size)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-tab-remove-size",value:"var(--band-height-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-tab-remove-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--tabs-tab-remove-icon-size",value:"var(--icon-size-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-tab-remove-space-inline-end",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-hover-background",value:"initial",description:"Menu item hover/highlight tint \u2014 `initial` so the --accent default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root). Defaults = hsl(var(--accent)) fill \xB7 hsl(var(--accent-foreground)) text."},{name:"--menu-item-hover-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--menu-item-hover-foreground",value:"initial",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-sticky-offset",value:"0px",description:"Sticky offset for the pinned filter strip (Toolbar `sticky`, #197). Default 0 (chrome, rule #44); raise it so the strip parks below a fixed topbar."},{name:"--filter-bar-sticky-background",value:"initial",description:"Fill painted only when the filter strip is pinned. Role-mirror knob (rule #45): `initial` so --background re-resolves at the call site under a scoped [data-tenant]/.dark theme."},{name:"--filter-bar-scroll-padding-y",value:"var(--space-1)",description:'Scrollbar gutter reserved under a `overflow="scroll"` filter strip (#216) so the inline scrollbar never overlaps the controls. Rule #45 \u2014 a service theme retunes it to its grid (0 on an overlay-scrollbar platform).'},{name:"--filter-bar-search-width",value:"20rem",description:"FilterBar typed model (gh#258) \u2014 token-owned geometry so every list page gets the SAME search width, filter width, chip rhythm and section stacking without page-local CSS. All are rule-#45 knobs: a service theme retunes them once, props/className override per instance. Below 640px the strip stacks (search/filters full-width); the widths apply from the 640px breakpoint up, always clamped by min(100%, \u2026) so a narrow container never overflows at 390px with long JA/EN/VI labels."},{name:"--filter-bar-filter-width",value:"var(--filter-picker-width-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-chip-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-section-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-height",value:"var(--band-height-md)",description:"MENU SURFACES \u2014 one row rhythm shared by DropdownMenu and Select's listbox. The row height was a literal `2rem` in the CSS and DropdownMenu had not been converted at all, so it carried the whole box as Tailwind literals on the component (#319). A service tunes the menu rhythm once here instead of once per surface."},{name:"--menu-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--menu-item-space-inline",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-space-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-font-size",value:"var(--font-size-base)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-inset-space-inline-start",value:"var(--space-8)",description:"Inset rows (a checkbox/radio row without its own indicator) reserve the indicator column so labels stay aligned with their checked siblings."},{name:"--menu-indicator-size",value:"0.875rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-indicator-inset-inline-start",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-icon-size",value:"var(--icon-size-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-content-space-inset",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-content-min-width",value:"10rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--dropdown-content-min-width",value:"8rem",description:"DropdownMenu is anchored to a small trigger, so it opens narrower than a context menu."},{name:"--dropdown-content-max-width",value:"calc(100vw - 1.5rem)",description:"Ceiling of the menu surface's intrinsic width (gh#1103). The surface is `width: max-content` so its width never depends on the provisional `left` it is first laid out at; this keeps a long label inside the viewport, less React Aria's default 12px container padding each side."},{name:"--dropdown-content-background",value:"initial",description:"THE MENU SURFACE (gh#880). `.ui-dropdown-menu-content` painted `hsl(var(--popover))` with no knob, while `.ui-popover-content` \u2014 the same kind of floating panel, in the same portal \u2014 had `--popover-surface-background`. That asymmetry is the shape of defect this repo keeps paying for: the theme reaches two of the three menu surfaces and the third silently stays opaque. A DROPDOWN IS THE MOST OPAQUE MEMBER OF THE FAMILY, by the standard's own rule (docs/GLASSMORPHISM-STANDARD.md \xA74): it is small, it sits over arbitrary content, and a 7-line menu over a photograph is unreadable at a card's alpha. It therefore gets its OWN fill knob rather than sharing the popover's \u2014 the two are meant to be able to differ. default = hsl(var(--popover)) at the call site"},{name:"--dropdown-content-backdrop-blur-size",value:"initial",description:"default = none \u2014 a menu blurs nothing"},{name:"--menu-content-width-sm",value:"12rem",description:'MENU WIDTH LADDER (gh#396) \u2014 the measures `<DropdownMenuContent width="sm|md|lg">` selects. Read ONLY when the prop is set, so an untouched menu keeps --dropdown-content-min-width above and moves by nothing. They exist because a menu wider than its trigger \u2014 a user menu, a project switcher, a notification panel \u2014 had exactly one mechanism left at the call site (`className="min-w-56"`), which put the width of every menu in the app beyond a theme\'s reach. A regular ladder, not the three literals one app happened to write: a service that wants 22.5rem notification panels retunes --menu-content-width-lg once.'},{name:"--menu-content-width-md",value:"16rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-content-width-lg",value:"20rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--dropdown-arrow-width",value:"var(--space-3)",description:"Ant Design `arrow` \u2014 the pointer at the anchored edge. Radix stamps a 10\xD75 svg; these two knobs override it so the pointer scales with a service theme's menu chrome. `--dropdown-arrow- background` is a role-mirror knob: `initial`, so --popover re-resolves at the CALL SITE."},{name:"--dropdown-arrow-height",value:"var(--space-inline-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--dropdown-arrow-background",value:"initial",description:"default = var(--popover) at the call site"},{name:"--menu-separator-space-block",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-separator-space-inline",value:"calc(var(--space-1) * -1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-dot-size",value:"0.625rem",description:"STEPS \u2014 the full (non-inline) variant. `--steps-inline-*` already covers the compact inline form; the marker, connector and text rhythm of the main variant were still literal on the component (#319), so a service could not resize the dot, retighten the vertical run, or move the horizontal connector to match its own grid."},{name:"--steps-dot-process-ring-width",value:"initial",description:"default = var(--stroke-xl), resolved at the call site (gh#906)"},{name:"--steps-marker-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--steps-marker-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-marker-icon-size",value:"var(--icon-size-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-wait-icon-size",value:"var(--icon-size-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-title-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-title-font-size-compact",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-subtitle-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-vertical-space-gap",value:"var(--space-3)",description:"Vertical run: gap between marker and text, and the drop to the next step."},{name:"--steps-vertical-space-block-end",value:"var(--space-8)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-vertical-text-space-block-start",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-horizontal-text-space-block-start",value:"var(--space-2)",description:"Horizontal run: the text sits under the marker, and the connector spans the gap between two markers \u2014 inset by the marker radius on each side so it never runs under a marker."},{name:"--steps-horizontal-text-space-inline",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-connector-inset",value:"1.25rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-connector-space-block-start",value:"var(--space-4)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-nav-space-gap",value:"var(--space-2)",description:'STEPS `navigation` (Ant Design `type="navigation"`) \u2014 each step becomes a slab that points at the next one. The rail\'s hairline connector is switched OFF for this type, so the join is the chevron plus this gap; the slab tint is the same `--muted` / `--accent` pair every other quiet surface in the library uses, so a service retunes it once at the role.'},{name:"--steps-nav-space-inline",value:"var(--space-4)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-nav-space-block",value:"var(--space-3)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-nav-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--steps-nav-separator-size",value:"var(--control-icon-size-sm)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-progress-ring-width",value:"initial",description:"STEPS `percent` (Ant Design) \u2014 the determinate arc around the CURRENT marker. It is a ring drawn in a padding box AROUND the existing marker, so no status face changes geometry. `--steps-progress-track-color` is a role-mirror knob (docs/TOKENS.md): `initial`, so the --muted default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme. default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--steps-progress-track-color",value:"initial",description:"default = var(--muted) at the call site"},{name:"--app-setting-picker-locale-width",value:"10rem",description:"APP SETTING PICKER \u2014 per-kind trigger widths (#319). Each picker is sized to the longest value it can show: a timezone name is far wider than a theme name. These were literal `sm:w-*` steps in a lookup table, so a service whose locale renders longer labels (a German timezone list, a Japanese density label) could not widen just the one that overflows."},{name:"--app-setting-picker-timezone-width",value:"14rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-date-format-width",value:"11rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-time-format-width",value:"11rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-theme-width",value:"9rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-brand-width",value:"11rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-density-width",value:"10rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-font-size-width",value:"9rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-trigger-width",value:"auto",description:"The width the labelled trigger actually RENDERS at \u2014 the one above that `data-kind` selected, or `auto` when no per-kind width applies (below the breakpoint, or `compact`). The trigger consumes this through a single `w-*` utility, because a width declared in @layer components loses to the utilities the Select trigger emits and the eight tokens above were therefore inert (gh#819). Set a per-kind token to retune one picker; set this one to override the axis at a call site."},{name:"--app-setting-picker-width-breakpoint",value:"40rem",description:"Below this the trigger hugs its content instead of taking the per-kind width, so a picker dropped into a narrow topbar never stretches the bar (gh#165)."},{name:"--app-setting-picker-bar-border-width",value:"0",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-bar-shadow",value:"none",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-icon-size",value:"var(--icon-size-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-icon-rest-alpha",value:"0.7",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-height",value:"var(--band-height-xl)",description:"Rule #24 for the two row-shaped surfaces in this file (gh#1146). Measured at 390px with `(pointer: coarse)`: a DropdownMenu / Select row 32px, a tab trigger 34px. Rows sit flush against each other and a horizontal tab list clips its block overflow, so neither can borrow a larger target from a pseudo-element the way an isolated control does \u2014 the ROW itself reaches the 44px tap floor, as every touch platform's menus and tab bars do. Tab sizes collapse onto the floor under a finger, exactly as the control ladder's compact/default steps already do."},{name:"--tabs-trigger-height-sm",value:"var(--band-height-xl)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-height-md",value:"var(--band-height-xl)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-height-lg",value:"var(--band-height-xl)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--org-chart-node-inline-size",value:"13rem",description:"The box. A fixed inline size, so siblings line up in even columns and the connector bus has a predictable pitch; long names wrap inside it instead of widening one box."},{name:"--org-chart-node-padding-block",value:"var(--space-3)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-node-padding-inline",value:"var(--space-3)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-node-gap",value:"var(--space-3)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-node-text-gap",value:"var(--space-1)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-node-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--org-chart-node-border-width",value:"initial",description:"default = var(--stroke-hairline)"},{name:"--org-chart-node-border-color",value:"initial",description:"default = hsl(var(--border))"},{name:"--org-chart-node-background",value:"initial",description:"default = hsl(var(--card))"},{name:"--org-chart-node-foreground",value:"initial",description:"default = hsl(var(--card-foreground))"},{name:"--org-chart-node-title-color",value:"initial",description:"default = hsl(var(--muted-foreground))"},{name:"--org-chart-node-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-agent-border-style",value:"dashed",description:'The `agent` variant\'s stroke style. A dashed edge, not a second colour \u2014 the difference must survive greyscale, and the sr-only "AI agent" carries it for a screen reader.'},{name:"--org-chart-level-gap",value:"var(--space-8)",description:"Spacing of the tree itself: the vertical run between a parent and its children's row, and the gutter between two siblings. The connector is drawn inside these gaps, half above the bus and half below it."},{name:"--org-chart-sibling-gap",value:"var(--space-4)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-line-width",value:"initial",description:"The connector. default = var(--stroke-hairline)"},{name:"--org-chart-line-color",value:"initial",description:"default = hsl(var(--border))"},{name:"--org-chart-padding",value:"var(--space-2)",description:"Room around the chart inside its scroll region, so an edge box's focus ring is not clipped."},{name:"--scroll-area-scrollbar-width",value:"thin",description:"`thin` reproduces the old 10px rail closely on the platforms that draw a classic scrollbar; `auto` gives the full-width platform bar, which is what a touch/coarse-pointer console wants. Only `auto | thin | none` are valid \u2014 a length is not (that is the standard property's whole bargain, and the reason `--scroll-area-bar-size` could not survive as a rem)."},{name:"--scroll-area-thumb-color",value:"initial",description:"Role-mirror knobs: `initial` so the defaults re-resolve at the CALL SITE under a scoped [data-tenant] / .dark theme. Defaults = hsl(var(--border)) thumb on a transparent track."},{name:"--scroll-area-track-color",value:"initial",description:"SCROLL AREA \u2014 the scrollbar, and the bottom-anchoring contract (gh#311). The hand-drawn rail knobs (--scroll-area-bar-size / -bar-padding / --scroll-area-thumb-radius) are GONE with the Radix rail they sized (v23): the browser draws the scrollbar now, and what a service can retune about it is the three standard scrollbar properties below. They live here, beside the anchoring constant, so every ScrollArea knob is in one file."},{name:"--scroll-area-scrollbar-space",value:"auto",description:"`scrollbar-gutter`: `auto` (reflow when a bar appears) | `stable` | `stable both-edges`. Reach for `stable` where content starting to overflow must not shift the layout under the reader."},{name:"--scroll-area-always-bar-size",value:"0.625rem",description:'`scrollbar="always"` geometry (gh#798). Only these two, and only for that value: the always-on bar is DRAWN by this package via `::-webkit-scrollbar`, so unlike the platform bar it has a size this package must name. The colours are NOT duplicated \u2014 the always-on rules read the same `--scroll-area-thumb-color` / `-track-color` role-mirrors as the standard ones.'},{name:"--scroll-area-always-thumb-radius",value:"var(--radius-pill)",description:"SCROLL AREA \u2014 the scrollbar, and the bottom-anchoring contract (gh#311). The hand-drawn rail knobs (--scroll-area-bar-size / -bar-padding / --scroll-area-thumb-radius) are GONE with the Radix rail they sized (v23): the browser draws the scrollbar now, and what a service can retune about it is the three standard scrollbar properties below. They live here, beside the anchoring constant, so every ScrollArea knob is in one file."},{name:"--scroll-area-anchor-offset",value:"3rem",description:"SCROLL AREA \u2014 the scrollbar, and the bottom-anchoring contract (gh#311). The hand-drawn rail knobs (--scroll-area-bar-size / -bar-padding / --scroll-area-thumb-radius) are GONE with the Radix rail they sized (v23): the browser draws the scrollbar now, and what a service can retune about it is the three standard scrollbar properties below. They live here, beside the anchoring constant, so every ScrollArea knob is in one file."},{name:"--segmented-track-padding",value:"calc(var(--space-1) / 2)",description:"track padding = the bold line width = 2px. Half the base spacing step rather than a raw length, so it rides `--scaling` with everything else."},{name:"--segmented-track-background",value:"initial",description:"track background \u2014 the recessed ground a control group sits in. default = var(--muted), resolved at the call site"},{name:"--segmented-track-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--segmented-track-radius",value:"initial",description:"track radius = the base radius; item radius = one step DOWN the radius scale, not `radius \u2212 trackPadding` (the two coincide only because the source scale happens to step by 2). This scale is \u03C6-spaced, so \"one step down\" from --radius is --radius-md (6px \u2192 3.71px, against the source's 6 \u2192 4); --radius-sm is two steps and reads visibly squarer. The same pair is already what TabsList (`rounded-lg`) and TabsTrigger (`rounded-md`) use \u2014 this library's other track-and-slab control. gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--segmented-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--segmented-item-padding-inline",value:"calc(var(--control-padding-x) - 1px)",description:"item padding-inline = control padding-x \u2212 one border width."},{name:"--segmented-xs-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"xs type step = the step Button xs already reads, so an xs bar and an xs Button on one row carry the same label size. One step of the existing scale, not a new constant."},{name:"--segmented-xs-item-padding-inline",value:"calc(var(--control-padding-x-compact) - 1px)",description:"xs item padding-inline = the SAME derivation as the md step (control padding-x \u2212 one border width), taken one rung down the control padding scale: 8 \u2212 1 = 7 against 12 \u2212 1 = 11. At 11px around a 12.47px label a three-option bar no longer reads as dense."},{name:"--segmented-item-gap",value:"calc(var(--space-3) / 2)",description:"icon gap = the small margin step / 2."},{name:"--segmented-item-color",value:"initial",description:"item ink = the label ink \xB7 hover / selected ink = the body ink. default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--segmented-item-hover-color",value:"initial",description:"default = var(--foreground), resolved at the call site (gh#906)"},{name:"--segmented-item-selected-color",value:"initial",description:"default = var(--foreground), resolved at the call site (gh#906)"},{name:"--segmented-item-hover-background",value:"initial",description:"item hover fill = the lighter neutral \xB7 active fill = the heavier of the pair. default = var(--accent), resolved at the call site (the freeze rule)"},{name:"--segmented-item-hover-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--segmented-item-active-background",value:"var(--secondary)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-item-active-background-alpha",value:"100%",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-item-selected-background",value:"initial",description:"selected fill = the elevated surface + a soft shadow \u2014 the selected slab reads as lifted off the recessed track, which is the whole affordance. default = var(--background), resolved at the call site"},{name:"--segmented-item-selected-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--segmented-item-selected-shadow",value:"initial",description:"`initial` + the ramp default at the CALL SITE (gh#880 item 7). Bound to `var(--shadow-md)` here it substituted on `<html>`, so a scope that restated the elevation ramp could not move the selected slab \u2014 the same freeze the two knobs above this one were converted for in gh#848, left on the one property that carries the lift. docs/TOKEN-RESOLUTION.md \xA73. default = var(--shadow-md), resolved at the call site"},{name:"--segmented-item-selected-font-weight",value:"var(--font-weight-medium)",description:"A SECOND SIGNAL, because the first one is nearly invisible on a light canvas (gh#843). The lifted-slab idea is right and the tokens express it, but measured on /showcase/theme-customization the slab is `rgb(253,253,252)` on a `rgb(244,243,240)` track \u2014 **1.09:1**, against the 3:1 floor WCAG 2.2 SC 1.4.11 sets for a non-text indicator. The reporter's words were \"ch\u1ECDn th\xEC \u0111\xE9o th\u1EA5y c\xF3 thay \u0111\u1ED5i g\xEC\", and the ratio says why: selection was carried by fill and shadow alone, and both are near-zero here. Weight does not depend on the canvas at all, which is the point \u2014 a 500 label reads as chosen on white, on near-white and in dark. antd's Segmented does the same; this is not a new idea, it is the one signal this port left out. The shadow steps `sm` \u2192 `md` alongside it so the elevation is doing visible work rather than nominal work."},{name:"--segmented-item-selected-border-color",value:"initial",description:"THE SIGNAL THAT ACTUALLY CLEARS THE FLOOR (gh#843, second pass). Weight above is a second signal; it is not a fix for the first one, because SC 1.4.11 is about the NON-TEXT indicator and a font weight is text. Measured from foundation.css: light slab rgb(253,253,252) on track rgb(244,243,240) \u2192 1.09:1 dark slab rgb(25,24,21) on track rgb(49,47,43) \u2192 1.33:1 Neither is fixable by moving the FILL. The slab is `--background` and the track is `--muted`; for the pair to reach 3:1 on a near-white canvas one of them has to become a mid grey (relative luminance \u2248 0.26, about #8a8a88), which either inverts the lifted-white-slab idea this control shares with TabsList/TabsTrigger, or re-seeds `--muted` for the whole system \u2014 a repaint of every recessed surface in the library to fix one control. Both are far larger than the defect. So the indicator moves to a BOUNDARY, which is what SC 1.4.11 asks for and what costs one hairline: `--input` is this palette's documented control-boundary role, already held at \u22653:1 in both themes for exactly this purpose. Measured against both of its neighbours: light vs track 3.18:1 \xB7 vs slab 3.47:1 dark vs track 3.17:1 \xB7 vs slab 4.22:1 It is painted as an INSET shadow next to the elevation shadow, so the selected item gains a ring without gaining a border box \u2014 no reflow, and `--segmented-item-padding-inline` (which already subtracts one border width) stays honest. `initial` + a call-site fallback, per docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\": a `:root` binding to `var(--input)` would freeze at the root's light value and a scoped dark region would keep the light ring. default = var(--input), resolved at the call site"},{name:"--segmented-count-min-width",value:"var(--button-count-min-width)",description:"Counter pill beside the label (gh#602). Geometry matches Button/Toggle count pills; COLOUR follows `Tabs` (gh#1019): resting = `--background` / `--muted-foreground`, byte-identical to a resting `.ui-tabs-count` on a CARD tab \u2014 the Tabs rule for a pill whose host surface is `--muted`, which the Segmented track is (a `--muted` pill there is 1.00:1, shape gone). The selected segment's pill = `--primary` / `--primary-foreground`, identical to the active tab's. gh#602 had painted EVERY pill primary \u2014 four identical blobs that dropped the one thing a count pill in a one-of-N control can say, \"this is the chosen one\". The resting number is held to SC 1.4.3 (\u2265 4.5:1 in both themes, measured in segmented-count-tabs-convention-1019.test.ts); it is not the selection indicator, so its fill only has to stand off the track, not reach 3:1. antd has no `count` on SegmentedItemType; this knob exists because every faceted filter in the wild needs one and nesting Badge in `label` was the only API until now."},{name:"--segmented-count-space-inline",value:"var(--button-count-space-inline)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-count-font-size",value:"var(--button-count-font-size)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-count-radius",value:"var(--radius-pill)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-count-gap",value:"var(--space-1)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-count-background",value:"initial",description:"default = hsl(var(--background)) at the call site"},{name:"--segmented-count-color",value:"initial",description:"default = hsl(var(--muted-foreground)) at the call site"},{name:"--segmented-count-selected-background",value:"initial",description:"default = hsl(var(--primary)) at the call site"},{name:"--segmented-count-selected-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--segmented-count-selected-color",value:"initial",description:"default = hsl(var(--primary-foreground)) at the call site"},{name:"--segmented-count-forced-outline-width",value:"initial",description:"default = var(--stroke-hairline) at the call site"},{name:"--separator-rule-size",value:"initial",description:"Rule weight, both orientations and both halves of a labelled rule. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--separator-rule-color",value:"initial",description:"Rule colour. Role-mirror knob \u2192 declared `initial` so the --border default re-resolves at the CALL SITE under a scoped [data-tenant] / .dark theme (docs/TOKENS.md \u2014 the :root freeze rule). Documented default = hsl(var(--border))."},{name:"--separator-label-gap",value:"initial",description:"Gap between the label and each rule half. `initial` so the default re-resolves at the call site: --space-* is density-scaled and re-declared inside a `.ui-density-*` subtree, so a :root binding would freeze the gap at the :root density. Documented default = var(--space-3)."},{name:"--separator-label-inset",value:"initial",description:'Length of the SHORT rule half when labelAlign is `start` / `end` \u2014 the label\'s inset from the inline edge (the Slack/Mattermost stream convention). It is a grid track on the INLINE axis, so it flips with the writing direction under dir="rtl" with no extra rule. `initial` for the same density reason as the gap. Documented default = var(--space-6).'},{name:"--separator-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Label type ramp (#46) \u2014 steps of the modular scale, never a literal. `xs` is the quiet stream/divider voice; --separator-label-line-height keeps ja/vi descenders and tone marks intact (cf. #254); --separator-label-font-weight lets a service raise an unread watermark without touching the day divider."},{name:"--separator-label-line-height",value:"var(--line-height-normal)",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-label-font-weight",value:"var(--font-weight-medium)",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-label-color",value:"initial",description:"Label colour. Role-mirror \u2192 `initial`; documented default = hsl(var(--muted-foreground))."},{name:"--separator-tone-muted-rule-color",value:"initial",description:"Per-tone rule + label colours. `tone` re-points BOTH the rule and the label \u2014 never the rule alone \u2014 so an attention rule such as an unread watermark is not colour-only (WCAG 1.4.1) and survives forced-colors. All role-mirror \u2192 `initial`; documented defaults are the matching semantic role. `muted` deliberately mirrors the quiet default so a service can still split the two voices later without a breaking change."},{name:"--separator-tone-muted-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-primary-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-primary-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-success-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-success-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-warning-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-warning-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-destructive-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-destructive-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-info-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-info-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--sheet-responsive-breakpoint-width",value:"48rem",description:'Viewport width at and below which `SheetContent responsive="auto"` renders the mobile bottom sheet instead of the desktop side panel. Read at runtime by useSheetResponsiveMode() (a CSS @media cannot resolve a custom property), so a service moves the drawer breakpoint from ONE knob for every overlay that opts into the responsive contract \u2014 Sheet and OrgSwitcher alike. 48rem = 768px mirrors the library\'s canonical mobile line (useIsMobile). Accepts px/rem/em.'},{name:"--sheet-bottom-max-height",value:"85dvh",description:'Block size cap for the responsive BOTTOM presentation only (never for a plain `side="bottom"` sheet, which stays content-sized). Keeps the sheet below the viewport so the SheetBody scrolls and the page behind it stays visible/dismissable.'},{name:"--responsive-grid-column-width",value:"20rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-section-label-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-product-tenant-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-badge-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-badge-background",value:"initial",description:'Sidebar nav count pill colours \u2014 the pill had a font-size knob and NO colour knob, so a rail that needed to tell "unread" from "mentions you" had to nest a <Badge> inside `badge` and got two pills, one inside the other. `initial` so the role defaults re-resolve at the call site under a scoped theme (a :root binding to a role var freezes at :root). Defaults = hsl(var(--secondary)) fill \xB7 hsl(var(--muted-foreground)) text.'},{name:"--sidebar-badge-foreground",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-badge-destructive-background",value:"initial",description:'The EMPHASIS pair, read only by `SidebarItemProp.badgeTone="destructive"` (rule #44 \u2014 a neutral row never resolves them). Defaults = hsl(var(--destructive)) fill \xB7 hsl(var(--destructive-foreground)) text, the canonical AA-checked pair.'},{name:"--sidebar-badge-destructive-foreground",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-user-focus-ring-alpha",value:"1",description:'Focus-ring alpha on the tinted shell grounds. It was 0.45, to stop the ring reading as a SELECTED item rather than a focused one \u2014 a real concern, but 0.45 composites to \u22481.90:1 against the page, so it answered it by making the indicator non-compliant with WCAG 2.2 SC 1.4.11 \u2014 colour IS the criterion for a focus indicator, so a translucent mark fails it whatever its area. The mark is opaque and the quieting comes from the halo outside it (`--focus-ring-glow-*`), which carries no criterion, and from the mark\'s light weight (one `lineWidth`, inset into the row). "Focused" is kept distinct from "selected" by the halo\'s shape, not by weakening the mark (styles/focus-ring.css).'},{name:"--topbar-chip-icon-size",value:"1.125rem",description:"Topbar glyphs. Three separate sizes, all previously baked as literals in shell-layout.css. --topbar-chip-icon-size is off the SCALE but on the pixel GRID, and those are different findings. Read the rule it styles: `display: grid; place-items: center; font-weight: 700` \u2014 it is a letter MEDALLION, not a glyph, so the half-pixel-stroke argument that made the NavigationMenu chevron snap from 14.4px to 14px does not apply here. 18px is a whole pixel sitting between --icon-size-md (16) and -lg (20); snapping it would be a visible 2px box change bought for nothing. Declared, not silently tolerated. scale-exempt: 18px letter medallion, a whole pixel between two icon steps, not a glyph"},{name:"--sidebar-product-caret-icon-size",value:"var(--icon-size-sm)",description:"Sidebar product-switcher caret \u2014 a real glyph, previously a bare 0.875rem."},{name:"--topbar-icon-size",value:"var(--icon-size-md)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-caret-icon-size",value:"var(--icon-size-xs)",description:"The caret is the eighth literal-sized icon rule in this file. The ratchet missed it because its selector says `caret` while the pattern looked for `icon|glyph` \u2014 the guard has been taught the wider vocabulary."},{name:"--topbar-icon-focus-ring-alpha",value:"1",description:"Opaque for the same reason as --sidebar-user-focus-ring-alpha above (SC 2.4.13)."},{name:"--sidebar-user-role-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-meta-foreground",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--sidebar-nav-sub-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-flyout-title-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-chip-icon-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--kbd-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-logo-mark-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-logo-mark-color",value:"initial",description:"The initial of the brand mark, whose FILL comes from the caller (`product.color`). No token can derive this ink \u2014 the library never sees that fill \u2014 and the literal it replaces measured 3.38:1 on the default `--attention` orange in all 15 theme x seed cells (gh#884). default = white at the call site"},{name:"--sidebar-avatar-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-user-name-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-gradient",value:"none",description:"Brand-chrome gradient hooks \u2014 opt-in, invisible by default. A service paints the sidebar/topbar surface by setting these to a gradient (no-op = none)."},{name:"--topbar-gradient",value:"none",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-surface-background",value:"initial",description:"THE SIDEBAR'S OWN SURFACE (gh#880). `.app-sidebar` painted a bare `hsl(var(--card))`, so the one piece of shell chrome that is ALWAYS on screen was the one a theme could not retint \u2014 the Topbar beside it has had `--topbar-background-alpha` since gh#831. Role-mirror knob: `initial`, with `hsl(var(--card))` resolved at the call site so a scoped theme's `--card` arrives. default = hsl(var(--card)) at the call site"},{name:"--sidebar-surface-background-alpha",value:"initial",description:"Its own opacity, defaulting to the card's (gh#901)."},{name:"--sidebar-backdrop-blur-size",value:"initial",description:"GLASS \u2014 `initial`, so unset there is no blur and, more importantly, no backdrop root. The sidebar is a long-lived container full of other people's content; promoting it to a containing block for fixed descendants by default would be the worst possible place to do it. default = none \u2014 the sidebar blurs nothing"},{name:"--app-shell-bar-background",value:"initial",description:"THE OTHER TWO SHELL ROWS, and they are here because leaving them out is the asymmetry this change exists to remove (gh#880). `.app-topbar` and `.app-nav-rail` are grid rows of `.app-root` \u2014 the chrome that is on screen for the whole session \u2014 and each painted a bare role with no knob while the sidebar beside them got one. THEY GET NO BLUR KNOB, deliberately. `.app-topbar` is a SIBLING of `.app-main`, not a child, so whatever vivid backdrop a theme paints inside the main region is not behind the bar and there is nothing there for a `backdrop-filter` to blur \u2014 it would be a knob that exists and does nothing, which is worse than an honest gap. The blur that IS wanted on the bar belongs to the `<Topbar>` COMPONENT inside it (`--topbar-backdrop-blur-size`, gh#831), whose backdrop is the row this knob paints. A theme that wants the whole bar to float over a gradient moves the gradient to `.app-root`; that is a theme decision, not a knob. default = hsl(var(--card)) at the call site"},{name:"--app-shell-bar-backdrop-blur-size",value:"initial",description:"The bar ROW's own blur. `--topbar-backdrop-blur-size` is NOT this knob: it is on the `<Topbar>` COMPONENT, which sits inside this row inset by `--app-shell-bar-inset` on each side, so blurring there leaves the row's gutters unblurred. The sidebar beside it has had this since gh#880; the row had none, which is what forced a theme onto the inner element. default = none \u2014 the bar row blurs nothing"},{name:"--app-shell-nav-rail-background",value:"initial",description:"default = hsl(var(--muted)) at the call site"},{name:"--app-shell-viewport-inset",value:"0px",description:"HOW MUCH OF THE VIEWPORT IS NOT THIS APPLICATION'S \u2014 0 unless something says otherwise, which is every ordinary page. A platform bar docked to a viewport edge sets it to the band it took, and the shell sizes itself to what is left instead of overflowing the window by that much."},{name:"--app-shell-bar-height",value:"var(--band-height-2xl)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-bar-inset",value:"var(--space-page-x)",description:"Inline inset and slot gap of the AppShell top bar. ONE OWNER FOR THE HORIZONTAL PAGE-INSET AXIS (gh#330). The bar sits in the SAME grid track as `.app-main`, directly above the page, so its first control and the page title are on one vertical edge \u2014 or they are supposed to be. These two knobs used to name their own values (--space-4 / --space-3) while the page named --space-page-x / --space-page-compact-x, and nothing reconciled them: measured in Chromium on /isolate/layout-app-shell the topbar's content started at x=80 while the page header's started at x=88 (1512px), and because the two sides also stepped at DIFFERENT breakpoints (shell 900px, page 720px) the error was not even constant \u2014 8px at 1512, 12px between 720 and 900, 4px below 720. A consumer cannot correct a drift that changes with the viewport. The page gutter WINS the axis, for three reasons: it is read by seven regions (page header, toolbar, body, footer, PageContainer.Inset, the DataTable full-bleed compensation, Banner) against this knob's one element; the bar is the region that must line up with the page, not the other way round (the rail is a different track with its own inset); and moving the bar moves exactly one element in one composition, while moving --space-page-x would move every page in every consumer app. The NAMES stay \u2014 a theme that already sets `--app-shell-bar-inset` keeps working, and a bar that genuinely wants to sit tighter than its page still has its own knob. Only the DEFAULTS now point at the owner. `-compact` applies below the PAGE's 720px step (not the shell's 900px restructure), so both sides tighten on the same line \u2014 see styles/shell-layout.css."},{name:"--app-shell-bar-inset-compact",value:"var(--space-page-compact-x)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-bar-gap",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-brand-max-inline-size",value:"none",description:"HOW MUCH OF THE BAR THE BRAND MAY KEEP (gh#728). A wide bar is not the problem, so the cap is `none` there; below the `sm` step the brand keeps at most a square of the row it sits in, and everything past that is cropped from the inline-end \u2014 which is the half a lockup can lose, because a lockup leads with its mark in both directions. A theme that wants the wordmark to survive on a phone raises the compact cap; a theme with a very wide lockup lowers the other. Choosing WHAT the narrow bar shows, rather than how much of it, is `AppShell logoCompact`: `viewBox` is an attribute and no stylesheet can set one."},{name:"--app-shell-brand-compact-max-inline-size",value:"var(--app-shell-bar-height)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-sidebar-width",value:"16rem",description:'Docked navigation TRACK widths \u2014 the SINGLE most-retuned shell constant (rule #45). A service that designs on a different grid sets `--app-shell-sidebar-width: 15.9375rem` (255px) once instead of forking `.app-root`. THREE WIDTHS, THREE DIFFERENT QUESTIONS \u2014 and two of them used to share the word "rail": - `--app-shell-sidebar-width` the sidebar track, expanded. - `--app-shell-sidebar-collapsed-width` the SAME track at `<AppShell sidebarCollapsed>`. - `--app-shell-nav-rail-width` a SECOND, separate track that only exists when the `navRail` slot is filled (the Slack/Teams shape). The middle one shipped as `--app-shell-rail-width` through 19.x, which read as "the width of the rail" and therefore collided head-on with the real rail added in 20.0.0 \u2014 two tokens, both 4rem, both spelled "rail", meaning entirely different things. Renamed with NO alias: an alias would resolve to a plausible width in either reading and break silently, which is precisely the failure class this package gates against everywhere else.'},{name:"--app-shell-sidebar-collapsed-width",value:"4rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-nav-rail-width",value:"2.5rem",description:"3.5rem, not the 4rem the collapsed sidebar uses. Two reasons, and both are why the default moved: at 4rem the rail's 32px controls sat in 16px of air on each side and read as a wide column rather than a rail; and a rail that happened to be exactly as wide as the collapsed sidebar made the two adjacent nav tracks fuse into one 8rem block the moment the sidebar collapsed. 3rem (48px) still clears the coarse-pointer 44px tap target, with 2px either side of a 44px control. It is a token precisely so a service that wants Slack's wider rail sets this one line \u2014 never a forked `.app-nav-rail`."},{name:"--app-shell-nav-rail-item-size",value:"var(--band-height-lg)",description:"The SIZE OF A RAIL CELL, and the reason the rail can be this narrow. The controls the rail hosts carry their own band token (`OrgSwitcher`'s collapsed trigger is a square of `--org-switcher-trigger-height`), so a narrower TRACK alone does not narrow them \u2014 it clips them, because the rail clips. The rail therefore sizes its own cells, exactly as the bar sizes a `TopbarItem` by stretching it to `--app-shell-bar-height`: chrome decides how big its cells are, the cell does not decide how big the chrome is. 2.25rem (36px) on a mouse \u2014 comfortably over the 24x24 of WCAG 2.2 SC 2.5.8 \u2014 and the coarse block below lifts it back to the 44px tap floor of rule #24, together with the track."},{name:"--app-shell-nav-rail-height",value:"var(--app-shell-nav-rail-width)",description:"The SAME rail turned 90\xB0: its thickness when `navRailPosition` is a block edge (top/bottom) and the column becomes a full-measure strip. A separate token rather than one \"size\", because a width read as a height is the kind of name that survives review and then confuses every later override. A strip is THINNER than the column, and 2.75rem is where thinner stops: `--band-height-xl` is 44px, the WCAG 2.2 AA touch floor this library states as rule #24 and enforces on every consumer, and it is also exactly `--org-switcher-trigger-height`. Below it the shell's own platform bar would be the one control on the page under the floor \u2014 and with the rail's `overflow: clip`, a control taller than the strip is clipped rather than shrunk. ONE THICKNESS, TWO AXES: it resolves to the width, so the rail is the same measure whichever edge it is docked to and a service retunes both with one line. It briefly carried a `+ 1px` for the strip's own separator \u2014 needed only while the cell was exactly as tall as the track; with `--app-shell-nav-rail-item-size` smaller than the track the border has room, and two different numbers for one rail is a worse defect than the pixel it bought."},{name:"--app-shell-nav-rail-inset",value:"var(--space-3)",description:"Block inset of the rail's own content \u2014 the counterpart of the sidebar's `--sidebar-nav-scroll-padding`, so the two navigation columns start their content on the same line under `topbarSpan=\"full\"`. It is deliberately NOT applied to the top edge under `topbarSpan=\"content\"`: there the rail runs to y=0 and its first row IS the shell's top row, so it takes the bar's band instead and the three columns share one centre line."},{name:"--app-shell-page-max-width",value:"none",description:'Optional shell-wide CONTENT cap (gh#672). Default `none`: inside AppShell the page is FLUID and spans the whole main column at every sidebar state (antd Pro Layout `contentWidth: "Fluid"`). It used to be 80rem on `.ui-page-container` as a whole, which left a 168px dead strip at a 1512px viewport once the sidebar was collapsed and cut a sticky footer short. A service that wants one bounded column sets it ONCE; it caps the page HEADER, TOOLBAR and BODY (the same bands `measure` caps) and NEVER the footer band, which is page chrome \u2014 only the footer\'s CONTENT follows it, ending on the body\'s end edge (gh#682). A page-level `measure` / `variant="narrow"` overrides it on that page. Never a page-local max-width.'},{name:"--app-shell-main-background",value:"initial",description:'Page ground behind `.app-main` (gh#399). Declared `initial` so the CALL SITE resolves the default \u2014 `var(--app-shell-main-background, var(--surface-recessed))` \u2014 against the LIVE theme: `--surface-recessed` is re-stated by the dark arm in tokens/semantic/layout.css, and a `:root` binding here would freeze it at the light value for any SCOPED dark subtree (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). It used to bind `hsl(var(--muted) / 0.4)` directly, which inverted the page/card elevation on dark (the page composited 1.015:1 LIGHTER than the cards standing on it) \u2014 see the --surface-recessed comment for the measurement. Light is byte-identical; dark now sits behind the card at 1.089:1. A service that wants its own ground still sets this token. Default = var(--surface-recessed).'},{name:"--app-shell-mobile-nav-width",value:"22.5rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-mobile-nav-background",value:"initial",description:"Mobile-drawer scrim \u2014 `initial` so the shared --overlay-background default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding freezes at :root). Default = var(--app-shell-mobile-nav-alpha) of the global scrim, i.e. rgb(0 0 0 / 0.2) out of the box."},{name:"--app-shell-mobile-nav-alpha",value:"40%",description:"Share of the global --overlay-background this drawer's scrim uses. A slide-in drawer washes the page more lightly than a modal dialog; keeping it a RATIO means a service retints the whole system with one --overlay-background and every overlay keeps its calibrated depth. A SHARE, not the resulting alpha (gh#886): the base already carries `/0.5`, so the product is 0.20. 40% of rgb(0 0 0 / 0.5) = rgb(0 0 0 / 0.20)"},{name:"--app-shell-mobile-nav-inset",value:"var(--space-1)",description:"Inline inset of the mobile drawer's scrollable nav body. Near-zero by design: the drawer nav (the <Sidebar> node by default) owns its own inset via --sidebar-nav-scroll-padding, so the generic sheet chrome inset must NOT stack on top of it (gh#211). Set it to var(--space-6) for a custom mobileNav node that wants the full sheet chrome inset."},{name:"--app-shell-mobile-nav-icon-size",value:"var(--icon-size-lg)",description:'Hamburger glyph in the drawer trigger. Bigger ON PURPOSE than the trigger Button\'s own `size="sm"` icon step (--control-icon-size-sm, 0.875rem) \u2014 it is the ONLY navigation affordance on a phone, so it reads at the 1.25rem step. A flat rem, not a density-scaled alias: it must not move with the density axis, or the one tap target that opens navigation shrinks on a compact page. Consumed as a `size-[var(...)]` utility so it outranks `.ui-button--sm svg` (see the comment at the call site in app-shell.tsx).'},{name:"--service-role-panel-list-gap",value:"0.25rem",description:"ServiceRolePanel (gh#319). `.ui-service-role-panel` shipped as a bare hook \u2014 the class was on the root but no rule existed anywhere, so the role rail's rhythm lived entirely as Tailwind literals inside the component and no theme could reach it (#45). The panel is a thin composition over MasterDetail, which still owns ALL the two-track geometry; these knobs cover only the role LIST inside the master rail. Flat rems, not `--space-*`: the literals they replace read Tailwind's own `--spacing` grid, which this package never remaps and which does not follow the density axis. Aliasing them would start scaling the rail inside a `.ui-density-*` subtree \u2014 a visual change, not a refactor. between role rows (was `gap-1`)"},{name:"--service-role-panel-row-gap",value:"0.25rem",description:"select button \u2194 delete button (was `gap-1`)"},{name:"--service-role-panel-item-title-gap",value:"0.375rem",description:"role name \u2194 lock Badge (was `gap-1.5`)"},{name:"--service-role-panel-item-padding-block",value:"0.5rem",description:"The role row is a MULTI-LINE button (name over a description/member-count line), so it opts out of the control height grid (`h-auto`) and sets its own block padding \u2014 that is what the `py-2` literal was doing. It needs the raised `.ui-service-role-panel` ancestor specificity (0,2,0) to beat `.ui-button--md { padding-block: var(--button-space-block) }` (0,1,0): layout.css is imported BEFORE control.css and both are `@layer components`, so an equal (0,1,0) rule here would silently lose."},{name:"--sidebar-brand-mark-size",value:"1.375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-height",value:"var(--band-height-md)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"ON the type scale (gh#329). This was `0.8125rem` \u2014 13px, which is not a step: the golden scale runs \u2026/ratio\xB2 \u2248 11.1 \xB7 /ratio \u2248 12.5 \xB7 base 14\u2026, so 13 sat BETWEEN two steps and every nav row in the rail read off the system's type rhythm. It had no mechanical anchor either \u2014 unlike the auth field label below, which is pinned to an artboard y-coordinate and keeps its literal with a declared `scale-exempt` \u2014 only the checked-in hi-fi source's number. GEOMETRY MOVES, by 0.53px: 13px \u2192 --font-size-xs (\u224812.47px), the step the sub-row (--sidebar-nav-sub-font-size) and the flyout title already take. Nothing reflows \u2014 the row is a fixed 2rem with `align-items: center`, and 1.5 \xD7 12.47 = 18.7px sits inside it with the same headroom 19.5px had. What is gained is that a service overriding --font-size-base now moves the rail's labels with the rest of its type, instead of leaving one constant behind."},{name:"--sidebar-nav-item-line-height",value:"1.5",description:"Line box of the nav LABEL, not the row (gh#254): `.sb-label` clips, so its line box is its clip box, and the row's `line-height: 1` shears descenders and Vietnamese tone marks. Keep >= 1.2."},{name:"--auth-account-summary-email-line-height",value:"1.5",description:"Same gh#254 trap, two more clipping boxes. `.ui-auth-account-email` and the truncating last child of `.ui-topbar-start` both clip (`overflow: hidden`/`clip` + `text-overflow: ellipsis`), so their line box IS their clip box \u2014 inheriting a tight value shears descenders and Vietnamese tone marks exactly as the sidebar label did. Keep >= 1.2."},{name:"--topbar-start-truncate-line-height",value:"1.5",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-icon-size",value:"var(--icon-size-md)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-gap",value:"0.625rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-padding-x",value:"0.625rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-gap",value:"2px",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-radius",value:"initial",description:"`initial`, not the calc() literal \u2014 a :root binding to --radius freezes there too (gh#888); default resolves at the call site. Default = calc(var(--radius) - 1px)."},{name:"--sidebar-nav-scroll-padding",value:"var(--space-3) var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-section-gap",value:"var(--space-4)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-section-label-padding-x",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-section-label-padding-bottom",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-search-width",value:"16rem",description:"The trigger's PREFERRED width, consumed as a flex BASIS \u2014 deliberately not a minimum. `.tb-search` is `width: 100%`, written for the `center` slot (flex: 1 1 0); in `start` (flex: 0 1 auto) that collapses to content width, so the trigger came out at 186px, narrower than the placeholder it holds. A hard `min-inline-size` fixed that and broke something worse: the bar's shrink contract. Measured at 1024 with a long account name, an unshrinkable trigger pushed the start cluster into the end cluster \u2014 the collision that contract exists to prevent. As a BASIS it holds this width where there is room and yields where there is not."},{name:"--topbar-search-max-width",value:"none",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-height",value:"auto",description:"Standalone <Topbar> geometry (rule #45). Topbar is a pure slot bar, so its box is intentionally QUIET by default: `auto` height and no inline inset, i.e. exactly what it did before these knobs existed \u2014 inside AppShell the `.app-topbar` grid row still owns the height. A service that places Topbar directly on a page sets `--topbar-height: 3.5rem` / `--topbar-inset: var(--space-4)` once instead of writing an app-local class. `--topbar-gap` is the gap BETWEEN the start/center/end clusters and INSIDE each of them, so one knob re-rhythms the whole bar."},{name:"--topbar-inset",value:"0px",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-gap",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-background-alpha",value:"initial",description:"THE GLASS BAR (gh#831) \u2014 the same two declarations two unrelated website showcases each hand-wrote on their own sticky header: a translucent page fill plus a backdrop blur. Both knobs are `initial`, i.e. QUIET by default in exactly the sense the paragraph above describes: a guaranteed-invalid value makes the whole declaration at the call site invalid-at-computed-value time, so `background-color` falls back to its own initial `transparent` and `backdrop-filter` to `none`. The shipped bar therefore paints nothing, creates no backdrop root, and is byte-identical to the pure slot bar it was. A service opts in with `--topbar-background-alpha: 85%` / `--topbar-backdrop-blur-size: 10px`. The TINT is NOT a knob: `.ui-topbar` reads `--background` directly at the call site, so a dark or tenant-scoped subtree re-tints the glass instead of inheriting :root's answer (docs/TOKENS.md \xB7 the `:root` freeze rule). Precedent for the blur name: --app-launcher-launchpad-backdrop-blur-size. default = none \u2014 the bar paints no fill"},{name:"--topbar-backdrop-blur-size",value:"initial",description:"default = none \u2014 the bar blurs nothing"},{name:"--topbar-center-compact-display",value:"none",description:"\u26A0 THIS KNOB DELETES CONTENT AT 1100px AND BELOW \u2014 read before you ship a center slot. At compact desktop/tablet widths the docked sidebar leaves too little inline room for three intrinsically-sized clusters, so the package hides the optional center slot before it can cover the breadcrumb/title or end utilities (gh#244). The default is `none`, which means a global search trigger placed in `center` is INVISIBLE from 1100px down \u2014 including on every phone \u2014 unless the consumer opts back in. That default arrived in 18.6.0 and removed the slot for consumers who never changed a line of their own code (gh#12); it stays because the overlap it prevents is a real defect and flipping a shipped default twice is worse than documenting it once, but it is a DECISION, not an accident: :root { --topbar-center-compact-display: flex; } \u2190 restore the slot at every width Opt back in only once the center content has a compact presentation of its own (an icon-only search trigger, a collapsing field). A page-local media query is the anti-pattern this knob replaces."},{name:"--topbar-item-padding-inline",value:"var(--space-3)",description:"TOPBAR BAR ITEM \u2014 the shape of an interactive cell IN the bar, as opposed to a control dropped into it. The bar's own chrome (Fluent's command bar, SLDS's global header, Atlassian's navigation, and the right-hand action slot of enterprise pro-layouts generally) draws a trigger as a full-height cell whose hover is the bar's surface; a `Button` in the same slot draws a --control-height pill with its own hover fill and its own ring, floating inside a taller strip. NO HEIGHT KNOB, DELIBERATELY. The cell's height IS the bar's, whatever the bar's is \u2014 `--app-shell-bar-height` inside AppShell, `--topbar-height` for a standalone Topbar, the coarse-pointer override on a touch device. A knob here would be a second answer that goes stale the moment either of those moves."},{name:"--topbar-item-padding-inline-compact",value:"var(--space-2)",description:"THE CELL'S PHONE-WIDTH INSET (godx-jp/id#639). A second value rather than a media query on the first, for the same reason `--app-shell-bar-inset-compact` is a second value: the compact number is its own design decision, and a theme has to be able to retune the two independently. Measured at 320px on a bar carrying the shipped shape (drawer trigger \xB7 logo \xB7 search trigger \xB7 four end cells): the cells alone spent 120px of a 320px viewport on padding, the bar overflowed by 44px, `.ui-topbar-start` collapsed to 0 and the search trigger was left painting 8px of itself from under the theme cell \u2014 a target axe scores at 8\xD728. At --space-2 the same bar fits with every cell whole."},{name:"--topbar-item-gap",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-min-width",value:"var(--control-height)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-radius",value:"var(--radius-sharp)",description:"Square by default: a cell that meets both bar edges has no corner to round. A service that wants the softer read sets this to var(--radius)."},{name:"--topbar-item-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--topbar-item-hover-background",value:"initial",description:"The bar's own hover surface \u2014 the same pair `.tb-icon-btn` already uses for the shell's built-in bar chrome, so a consumer-supplied cell and the shell's own read identically. default = var(--accent), resolved at the call site (the freeze rule)"},{name:"--topbar-item-hover-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--topbar-item-hover-color",value:"initial",description:"default = var(--accent-foreground), resolved at the call site"},{name:"--topbar-item-active-background",value:"var(--secondary)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-offset-block",value:"var(--space-1)",description:"COUNT PILL overlaid on the cell's glyph (gh#398) \u2014 the unread affordance the bell needs. The offsets are what a call site used to hand-write as `relative` + `absolute -end-0.5 -top-0.5`, i.e. a position the cell owns and no theme could retune; they are measured from the GLYPH box (the pill is centred on the cell, then pushed out by these), so a bar that retunes --topbar-icon-size keeps the pill on the glyph's corner. Colour mirrors `.sb-badge`: quiet by default, `badgeTone=\"destructive\"` for a count addressed to the user. The two role-mirror knobs stay `initial` so a scoped [data-tenant]/.dark override of --secondary/--destructive still reaches the pill (docs/TOKENS.md). Defaults = hsl(var(--secondary)) \xB7 hsl(var(--muted-foreground)) \xB7 hsl(var(--destructive)) \xB7 hsl(var(--destructive-foreground))."},{name:"--topbar-item-badge-offset-inline",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-size",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-padding-inline",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-background",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-foreground",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-destructive-background",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-destructive-foreground",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-focus-ring-offset",value:"calc(-1 * var(--focus-ring-width))",description:"The mark is hosted INSIDE the cell. A full-bleed cell has no room outside itself \u2014 the bar family clips both axes (`overflow: clip` + `--focus-ring-clip-margin`) precisely because an outset ring on a flush control gets shaved \u2014 and an inset mark is also the lighter read, the same reasoning `a.ui-list-row` / `.sb-nav-item` already record in styles/focus-ring.css. The offset TRACKS the mark's own width, so the two cannot drift apart, and it multiplies by the `--focus-outline` switch through that width: switch off \u2192 width 0 \u2192 offset 0. NO GEOMETRY IS AUTHORED HERE; the cell only says where the mark sits."},{name:"--org-switcher-trigger-height",value:"var(--band-height-xl)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-trigger-padding-x",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-avatar-size",value:"var(--control-height-sm)",description:"1.75rem was the literal; --control-height-sm IS 1.75rem and is the tier this mark belongs to, so a service that re-tiers its controls moves the mark with them instead of leaving it behind."},{name:"--org-switcher-sheet-inset",value:"var(--space-3)",description:"The compact-picker inset, shared by the sheet heading and the list \u2014 see .ui-org-switcher-sheet."},{name:"--org-switcher-list-inset",value:"var(--org-switcher-sheet-inset)",description:"Where a row's LABEL starts \u2014 the same on every surface, so it lines up with the heading."},{name:"--org-switcher-list-offset",value:"0px",description:"What the SURROUNDING SURFACE insets the list by, which a row cancels so its fill and its rule reach both edges. Zero by default: the popover publishes --popover-space-inset: 0, so there is nothing to cancel there, and cancelling anyway drags the row outside the panel and puts its text on the border. The sheet, which does inset its body, overrides this."},{name:"--org-switcher-legend-space-gap",value:"var(--space-4)",description:"The keyboard legend under a modal picker \u2014 see `.ui-org-switcher-legend`."},{name:"--org-switcher-legend-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-hint-space-gap",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-dialog-width",value:"26rem",description:"The dialog surface's measure. Wider than --org-switcher-menu-width because the whole reason to reach for the dialog is that a row carries more than a name; narrower than the generic --dialog-width-default because it is still a list of choices, not a form."},{name:"--org-switcher-search-space-block",value:"var(--space-3)",description:"Breathing room above and below the search field. The INLINE side is deliberately not here: it depends on --org-switcher-list-offset, which each surface sets on itself, and a composite declared at `:root` substitutes its vars AT `:root` \u2014 it would bake in the default 0 and never see the dialog's or the sheet's value. That is the same trap --dialog-space-inset set, and it caught this rule too on the first attempt, so the inline half is computed in the rule."},{name:"--org-switcher-menu-width",value:"16rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-sheet-max-height",value:"75dvh",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-state-min-height",value:"8rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-panel-width",value:"20rem",description:"APP LAUNCHER \u2014 the nine-dot platform app grid in the topbar. NO TRIGGER GEOMETRY KNOB, deliberately, for exactly the reason `--topbar-item-*` declares no height: the trigger IS a `TopbarItem`, so the bar's own height and the bar's own hover surface are already its answer, and a second answer here would go stale the moment either moves. NO COLUMN-COUNT TOKEN EITHER, and that one is a GAP, not a choice: the component-token name vocabulary (scripts/check-token-tiers.mjs) has words for every length and colour and none for a count, so `--app-launcher-columns` cannot be spelled legally here. It is declared on `.ui-app-launcher-panel` in styles/shell-layout.css instead, which keeps it themeable but out of this tier. Give the vocabulary a `count` word and it moves here with the rest."},{name:"--app-launcher-panel-max-height",value:"26rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-panel-gap",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-sheet-max-height",value:"75dvh",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-grid-gap",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-tile-gap",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-tile-padding",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-tile-min-height",value:"var(--control-height-comfortable)",description:"The tap floor (rule #24, WCAG 2.2 AA 2.5.8) \u2014 a tile is a link on a phone before it is a tile on a desktop, and the comfortable control tier IS that floor."},{name:"--app-launcher-tile-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--app-launcher-tile-color",value:"initial",description:"default = var(--foreground), resolved at the call site (gh#906)"},{name:"--app-launcher-tile-hover-background",value:"initial",description:"default = var(--accent), resolved at the call site (the freeze rule)"},{name:"--app-launcher-tile-hover-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--app-launcher-tile-hover-color",value:"initial",description:"default = var(--accent-foreground), resolved at the call site"},{name:"--app-launcher-tile-current-background",value:"initial",description:"The app you are already in. `initial` so the role default re-resolves at the call site under a scoped theme, the same reason `--sidebar-item-active-*` does. Default = hsl(var(--secondary))."},{name:"--app-launcher-mark-size",value:"2.5rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-mark-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--app-launcher-mark-background",value:"var(--secondary)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-mark-foreground",value:"var(--secondary-foreground)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-mark-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-name-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-group-label-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-group-label-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--app-launcher-state-min-height",value:"8rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-backdrop-background",value:"initial",description:"Role-mirror knob: `initial` so a scoped theme's --background re-resolves at the call site (docs/TOKENS.md). Default = a veil of the theme's OWN background at the alpha below."},{name:"--app-launcher-launchpad-backdrop-blur-size",value:"var(--blur-lg)",description:"16px \u2014 gh#837"},{name:"--app-launcher-launchpad-backdrop-alpha",value:"55%",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-backdrop-color-saturate",value:"180%",description:"THE INGREDIENT THAT MAKES IT GLASS RATHER THAN FOG. Blur alone averages a page towards its mean, and the mean of any real screen is a mid grey \u2014 28px of it turned a dashboard into a featureless haze with the tiles floating in nothing. Pushing chroma back up after the blur is what a physical frosted pane does: it scatters direction, not colour."},{name:"--app-launcher-launchpad-space-inset",value:"var(--space-8)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-space-safe-area",value:"0",description:"THE PART OF THE VIEWPORT THE HOST HAS ALREADY SPOKEN FOR \u2014 0 by default, because a page that owns its whole viewport has nothing to declare. A host with fixed chrome of its own (a docked platform bar, a persistent player) sets it to a padding box, and the scrim insets by that much so neither the grid nor the dismiss lands underneath. Measured without it, with a 40px rail on the inline-start edge: the first tile and the title both began at x=32 and ran 8px under the bar. A length or a 2/3/4-value box, exactly like `padding`."},{name:"--app-launcher-launchpad-panel-max-width",value:"60rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-panel-gap",value:"var(--space-8)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-grid-gap",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-tile-inline-size",value:"7.5rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-tile-padding",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-tile-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--app-launcher-launchpad-tile-gap",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-tile-hover-background",value:"color-mix( in srgb, hsl(var(--foreground)) 10%, transparent )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-mark-size",value:"4rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-mark-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--app-launcher-launchpad-mark-background",value:"color-mix(in srgb, hsl(var(--card)) 78%, transparent)",description:"The glass itself: a wash of the surface colour, not a colour of its own, so it inherits the theme and stays legible on a light page and a dark one."},{name:"--app-launcher-launchpad-mark-border-color",value:"color-mix( in srgb, hsl(var(--foreground)) 14%, transparent )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-mark-font-size",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-mark-shadow",value:"var(--shadow-lg)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-name-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-title-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-title-letter-spacing",value:"0.08em",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-close-space-padding",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-item-hover-background",value:"initial",description:"THE HOVER FILL, the pair to the active one below it (gh#909). `initial`, with `hsl(var(--accent))` resolved at the call site in shell-layout.css, so an unset knob paints exactly what shipped before and a scoped `--accent` re-tint still reaches it. It exists because a dark rail on a light app could theme every other role of the sidebar \u2014 surface, item ink, icon states, the active pair \u2014 and then hovered to the GLOBAL light `--accent`."},{name:"--sidebar-item-active-background",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-item-active-foreground",value:"initial",description:"The open row's LABEL, at BOTH nav depths \u2014 one name since gh#651 (level 2 used to spell it `--sidebar-item-active-color`). Default = the primary ACTIVE tier, derived at the call site from the live `--primary` (gh#678). It was `--primary` itself, which clears AA on the tint only for our own seed: 4.25:1 for `204 100% 37%`, 4.00:1 for `173 80% 28%`, 4.15:1 for a dark `262 83% 70%`. The active tier steps AWAY from the ground, and measured over every seed that is legible as text on the ground at all it never lands under 4.5:1 (sidebar-active-contrast.test.ts)."},{name:"--sidebar-item-active-tint",value:"initial",description:'The level-2 dot marker (`.sb-nav-item--sub[data-active="true"]::before`) \u2014 its own knob because it is a different PART, not a second name for the label. Default = hsl(var(--primary)).'},{name:"--sidebar-item-active-background-alpha",value:"12%",description:"THE TINT STRENGTH, AND IT HAS A CEILING \u2014 rule #45, and the reason this is a knob at all. The fill is the brand at this alpha over whatever the nav sits on, so raising it walks the fill TOWARDS the label that rides on it and contrast falls monotonically. Measured on the package seed (GoDX violet #7a00ff light / #dcbcff dark, identity v2.3), with the label as the primary ACTIVE tier since gh#678 (#5400b0 light / #cd9fff dark), against the composited fill: alpha light on --card dark on --card dark on --background 0.12 8.26:1 5.89:1 6.51:1 \u2190 shipped 0.16 7.65:1 5.32:1 5.88:1 \u2190 the cap below 0.22 4.55:1 \u2190 last step still AA, dark card 0.23 4.43:1 \u2190 under SC 1.4.3 16% is a CAP WITH HEADROOM on our seed, not the cliff edge \u2014 and it is a cap on OUR seed only: over a dense grid of consumer seeds a handful of legible dark-theme seeds dip under 4.5:1 on `--card` at 16% (worst 4.27:1), while at the shipped 12% none does. A service raising the tint on its own seed owns that measurement. `sidebar-active-contrast.test.ts` fails if this rises past the cap, and names the consumer-seed exception rather than hiding it."},{name:"--auth-shell-control-height",value:"var(--control-height-comfortable)",description:"AuthShell \u2014 centred auth/login page shell. Comfortable control density (44px, WCAG touch floor) + a larger auth heading, scoped to the shell; a service re-tunes the auth card width, insets and heading size without forking."},{name:"--auth-shell-heading-size",value:"var( --font-size-2xl, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-card-max-width",value:"24rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-bar-padding",value:"var(--space-5) var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-main-padding",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-footer-padding",value:"var(--space-3) var(--space-6) var(--space-4)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-bar-gap",value:"var(--space-inline-sm)",description:"Gap between the items of the brand bar: brand to a wrapped `actions` row, and between the page-level controls inside that row (locale \xB7 theme \xB7 help)."},{name:"--auth-shell-wide-card-max-width",value:"64rem",description:'Content-slot measure for `measure="wide"` \u2014 the SPLIT login (brand panel beside the auth card). Same width as the widest CenteredShell tier, so a product\'s login and its signed-in pages read at one page measure. Only `measure="wide"` reads it; the default 24rem card is untouched.'},{name:"--auth-shell-canonical-control-height",value:"var(--band-height-lg)",description:"Canonical DXS auth preset. These are public theme knobs: consumers select the preset once on AuthShell and may retune the product theme here rather than overriding individual fields."},{name:"--auth-shell-canonical-card-max-width",value:"22.5rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-canonical-heading-size",value:"var(--font-size-base)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-canonical-main-padding",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-canonical-main-padding-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-compact-card-inset",value:"var(--space-6)",description:"INLINE (start/end) inset of the compact auth card \u2014 the column the title, fields and actions align to. Independent of the block axis below (gh#232)."},{name:"--auth-shell-card-padding-block-compact",value:"initial",description:"BLOCK (top/bottom) padding of the compact auth card \u2014 the knob that tunes canonical Login card HEIGHT without narrowing the column. Bound to the card's --card-space-shell-y, so it really reaches CardContent's block edges (before gh#232 it was wired only to --card-space-body-y and the rendered body kept the inset on both block edges \u2014 the documented token did nothing). Declared `initial` so the default mirrors the LIVE --auth-shell-compact-card-inset resolved at the CALL SITE: the canonical card renders exactly as before (24px block = 24px inline), and a service that re-tunes the inset inside a scoped `[data-tenant]` still drags the block default with it (a :root binding would freeze at the :root inset \u2014 docs/TOKENS.md). default = var(--auth-shell-compact-card-inset)"},{name:"--auth-shell-card-body-gap-compact",value:"var(--space-3)",description:"Header\u2194body gap inside the compact auth card (the breathing room under the title before the first field). Its own knob since gh#232 \u2014 it used to ride on --auth-shell-card-padding-block-compact, which conflated the section gap with the card's block padding and made the block knob un-tunable. Default is the pre-gh#232 12px rhythm."},{name:"--auth-shell-card-gap-compact",value:"var(--space-3)",description:"IN-SLOT stack gap of the compact auth card (title \u2195 description inside the header)."},{name:"--auth-shell-main-align",value:"center",description:"Main-axis alignment of the auth column. Default `center` = today's vertically-centred card; a flow whose intro + card + footnote stack is tall opts into `start` via this knob."},{name:"--auth-shell-card-stack-gap",value:"0px",description:"Gap between the direct sections of the auth column (intro \xB7 card \xB7 remember row). Default 0 (quiet, rule #44) so an existing single-card consumer is untouched; presets opt in."},{name:"--auth-shell-login-card-max-width",value:"22.5rem",description:"Login preset (gh#237) \u2014 canonical SCR-001 anchors at 1440x900, 1024x900 and 390x844. The 112px identity slot is deliberately taller than a two-line real requester. Identity content aligns to the slot end, so missing/one-line/two-line requester data changes only the empty space above it, never the card or footer position. The flow starts at y=231 desktop and y=221 mobile: 231/221 + 112 + 20 gap = card y=363/353. Literal artboard lengths belong here, not in a consumer selector, and do not drift with --scaling."},{name:"--auth-shell-login-flow-offset-block",value:"14.4375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-flow-offset-block-mobile",value:"13.8125rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-main-padding-inline",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-main-padding-inline-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-main-padding-block-end",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-identity-slot-block-size",value:"7rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-card-stack-gap",value:"1.25rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-card-padding-block-compact",value:"var(--auth-shell-compact-card-inset)",description:"Canonical SCR-001 block inset is a FLAT 24px \u2014 the same measure as the inline inset. The card draws its own 1px border and a border-box rect already contains it, so the former `+ 2 x --control-border-width` double-counted the border and pushed the passkey CTA to y=390 instead of the canonical y=388 (gh#263)."},{name:"--auth-shell-device-card-max-width",value:"23.75rem",description:"Device-authorization preset \u2014 380px card measure, 15px block \xB7 5px inline mobile gutter (at a 390px viewport the card is x=5px, width=380px)."},{name:"--auth-shell-device-main-padding",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-device-main-padding-mobile",value:"0.9375rem 0.3125rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-device-otp-slot-inline-size",value:"1.71875rem",description:'CODE FIELD measure \u2014 the preset owns it (gh#12). A device grant is the one canonical flow whose PRIMARY control is the code field, so leaving it on the generic square --otp-slot-size made the preset own the page but not its own subject: two 4-slot `appearance="grouped"` boxes rendered 146x38 (4 x the canonical 36px control tier + the 1px group border) against a 112x54 artboard. These are the per-slot boxes that ADD UP to that artboard group: inline 27.5px x 4 + 2 x 1px group border = 112px block 52px + 2 x 1px group border = 54px Literal artboard lengths, like every other preset measure here \u2014 they must not drift with --scaling. A service that groups its code differently overrides --otp-slot-inline-size / --otp-slot-block-size on its own field; the generic square knob is untouched everywhere else.'},{name:"--auth-shell-device-otp-slot-block-size",value:"3.25rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-context-card-max-width",value:"25rem",description:"Context-selection preset \u2014 25rem card measure on desktop/tablet, edge-to-edge on mobile (0 inline gutter) with a 16px rhythm between the intro, the card and the remember row."},{name:"--auth-shell-context-main-padding",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-context-main-padding-mobile",value:"var(--space-6) 0",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-context-card-stack-gap",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-recovery-card-max-width",value:"27rem",description:"Account-recovery preset (gh#233) \u2014 the SCR-008 measure shared by the password-recovery panel (request \xB7 sent \xB7 new-password \xB7 expired) and the sign-in MFA challenge panel (OTP \xB7 recovery-code \xB7 passkey-failure). Both canonical desktop panels measure w=432 at 1440, so ONE preset owns them; the 360px canonical Login measure is untouched. The mobile gutter is a DECIDED contract, not a traced artboard: the supplied 390 reference is a desktop 2x2 composite that crops horizontally and cannot be measured. 15px inline at 390 \u21D2 the panel is x=15, width=360 \u2014 the same page rhythm as the canonical Login flow, so a user moving from Login to Recovery on a phone never sees the surface jump."},{name:"--auth-shell-recovery-main-padding",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-recovery-main-padding-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-card-max-width",value:"22.5rem",description:"Registration preset (gh#256) \u2014 the canonical sign-up measure. Two things make it structurally different from every preset above, and both are the reason it could not be expressed by re-using `login`: 1. LONG-FORM SCROLLING. A registration card is the tallest surface in the hosted-identity set (name \xB7 email \xB7 password \xB7 confirm \xB7 strength meter \xB7 consent \xB7 submit \xB7 provider row), and a vertically CENTRED tall card clips its own top on a short viewport \u2014 the top overflows above the scroll origin and becomes unreachable. So the column is start-aligned and the block-start inset becomes ordinary page padding the user can scroll past. 2. FOOTER CLEARANCE. The legal/consent footer must never be flush against the submit button at the end of a long scroll, so the block-end inset is a knob of its own rather than mirroring the block-start one. The 360px form measure and the 15px mobile inline gutter match the canonical Login flow exactly (22.5rem card, x=15 at 390 \u21D2 width=360), so a user moving sign-in \u2192 sign-up on a phone never sees the surface jump."},{name:"--auth-shell-registration-main-padding-block-start",value:"1rem",description:"Block-start PAGE GUTTER \u2014 the floor the column keeps against the viewport edge once the auto margins in shell-layout.css have placed it. It is deliberately NOT the artboard offset any more. It used to be 9.5rem / 8.875rem, derived from the canonical SCR-002 anchor (card y=284 at 1440x900 and y=274 at 390x844, each the offset plus the 112px identity slot plus the 20px stack gap). Held as unconditional padding, that constant manufactured a scrollbar out of nothing: at 1440x900 the column measured 152px of EMPTY SPACE + 793px of content + 48px, i.e. 993px in a 900px viewport, so the page scrolled 93px and the scrolled region was blank. A sign-up form whose first field sits below the fold because of decoration is a worse failure than a lost artboard anchor, so the anchor yields. Both values are still public knobs: a product that wants the literal artboard back sets this to 9.5rem and accepts the overflow on a short viewport."},{name:"--auth-shell-registration-main-padding-block-start-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-main-padding-inline",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-main-padding-inline-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-main-padding-block-end",value:"3rem",description:"Footer clearance \u2014 the gap the legal footer keeps below the end of a long form."},{name:"--auth-shell-registration-main-padding-block-end-mobile",value:"2rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-card-stack-gap",value:"1.25rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-identity-slot-block-size",value:"7rem",description:"Fixed identity track, the same 112px `login` proved (gh#237). Without it the card anchor moves with the title/requester line count, so the canonical y above would hold for exactly one copy length and drift for every other. The slot absorbs absent / one-line / two-line identity content instead."},{name:"--auth-shell-divider-gap",value:"0.625rem",description:"Labelled auth divider geometry. The canonical SCR-001 divider row is 19px tall at an 11px label (the artboard label inherits the page's line-height instead of collapsing to a 1.0 line box). 19/11 is that RATIO, not a pin: it holds the row proportional when the label's step moves, which is exactly what gh#329 did to it. The previous hardcoded `line-height: 1` rendered an 11px row, sitting the whole lower half of the Login card 8px high (gh#263). ON the type scale (gh#329): the label was the literal `0.6875rem` (11px) and is now --font-size-2xs, the scale's ratio\u207B\xB2 step \u2248 11.107px \u2014 the same step the sidebar section label, the kbd cap and the chrome page subtitle already take. GEOMETRY MOVES by 0.11px on the label and 0.19px on the row (19 \u2192 19.19px), i.e. a fifth of a pixel, and in exchange the auth micro-scale finally rides the service's --font-size-base like everything else. 11 was never a step; it was 2xs rounded to the nearest whole pixel and then written down as if it were."},{name:"--auth-shell-divider-label-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-divider-label-line-height",value:"calc(19 / 11)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-divider-rule-color",value:"var(--border)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-divider-label-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--auth-identity-gap",value:"0.375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-requester-gap",value:"0.375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-requester-icon-size",value:"var(--icon-size-md)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-requester-glyph-size",value:"var(--icon-size-2xs)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-min-height",value:"var(--control-height-comfortable)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-gap",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-padding",value:"var(--space-1) var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-identity-min-width",value:"12rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-avatar-size",value:"var(--control-height-sm)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-avatar-glyph-size",value:"var(--control-icon-size-sm)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-email-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-footer-content-gap",value:"0.375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-footer-text-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"The same 11px \u2192 2xs snap as the divider label above (gh#329); this one carried no artboard anchor at all, only the literal. GEOMETRY MOVES by 0.11px."},{name:"--auth-footer-target-min-size",value:"var(--touch-target-min)",description:"The legal links sit at --font-size-2xs, so their line box alone is ~19px and every auth page failed WCAG 2.2 SC 2.5.8 on Terms / Privacy / the locale trigger. The floor is applied to the link BOX rather than a ::after hit area: the target a user (and an audit) measures is the element itself, and an invisible overlay that still reports 19px is not a fix. Text metrics are untouched \u2014 only the box grows."},{name:"--auth-stack-gap",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-field-label-gap",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-field-label-font-size",value:"0.75rem",description:"scale-exempt: SCR-001 pins the email input at y=489; --font-size-xs (12.47px) drifts the 18px label box to 18.7px (gh#263)"},{name:"--auth-shell-field-label-line-height",value:"1.5",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-bar-height",value:"var(--app-shell-bar-height)",description:"CenteredShell \u2014 authenticated, no-sidebar, centred-column page shell (hosted-ID \"My Page\", account, standalone settings). The bar mirrors AppShell's `.app-topbar`: the same fixed height, and now the same HORIZONTAL PAGE-INSET AXIS (gh#330) \u2014 bar, main and footer all read the page gutter and all step to the compact gutter on the page's own `(max-width: 720px)` line, so the bar's content and the column beneath it share one content edge at every width. The comment here used to claim the bar mirrored `.app-topbar`'s inline padding. It did not, and had not since gh#330 moved that side onto --space-page-x: the bar was left hard-coding --space-4 (16px) while main and footer used --space-6 (24px). Measured in Chromium on /isolate/layout-centered-shell BEFORE this fix, the bar's content sat at x=16 and the column at x=24 \u2014 a constant 8px misalignment at every width from 784px down to 390px. 784 is not arbitrary: it is the md tier (46rem) plus the two 24px main gutters, the width below which the column stops being centred and pins to the gutter, which is what makes the error visible. AFTER: 24/24 at 784 and 760, 16/16 at 700 and 390. The column max-width has three tiers, all wider than the 24rem auth card. A service retunes the inset, block padding and each width tier without forking CSS."},{name:"--centered-shell-bar-padding-x",value:"var(--space-page-x)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-bar-padding-x-compact",value:"var(--space-page-compact-x)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-main-padding",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-main-padding-inline-compact",value:"var(--space-page-compact-x)",description:"Inline-only compact steps. They exist as their own knobs rather than as a redefinition of the shorthands above, so `--centered-shell-main-padding` keeps meaning all four sides and a service that already sets it is not broken by this fix."},{name:"--centered-shell-footer-padding",value:"var(--space-3) var(--space-6) var(--space-4)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-footer-padding-inline-compact",value:"var(--space-page-compact-x)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-column-offset-block",value:"0",description:'Block offset of the centred column inside the 100dvh shell. `0` (default, the quietest state \u2014 rule #44) keeps the top-aligned flowing page; `auto` centres the column in the viewport, which is what CenteredShell `align="center"` sets for a SYSTEM-level standalone surface (500/503 error page, maintenance notice). Auto block offsets collapse to 0 when the content is taller than the viewport, so a long localized message scrolls from the top instead of clipping.'},{name:"--centered-shell-width-sm",value:"32rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-width-md",value:"46rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-width-lg",value:"64rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-landing-max-width",value:"67.5rem",description:'CenteredShell \xB7 public-landing preset (gh#252) \u2014 the token-owned geometry of a PUBLIC marketing / product landing page: one content measure shared by header, main column and footer, the section rhythm between page sections, the flat (chrome-quiet) card presentation and the hero heading tier. Every value is a service-themeable knob (rule #45): a landing composition is a COMPOSITION of real primitives (docs/COMPOSITION-VS-COMPONENT.md \u2014 Hero/Navbar/Footer FAIL the Framework-Component Test), so the consumer must never own geometry or a media query. These knobs are read ONLY under `.ui-centered-shell[data-preset="public-landing"]`, so the default shell \u2014 which emits no `data-preset` at all \u2014 is byte-identical to before. 1080px \u2014 header/main/footer share ONE measure'},{name:"--centered-shell-landing-inset-inline",value:"var(--space-6)",description:"24px page gutter \u2265 40rem"},{name:"--centered-shell-landing-inset-inline-compact",value:"var(--space-4)",description:"16px page gutter < 40rem"},{name:"--centered-shell-landing-main-padding-block",value:"var(--space-10)",description:"40px"},{name:"--centered-shell-landing-main-padding-block-compact",value:"var(--space-6)",description:"24px"},{name:"--centered-shell-landing-section-gap",value:"var(--space-10)",description:"rhythm BETWEEN page sections"},{name:"--centered-shell-landing-section-gap-compact",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-landing-footer-padding-block",value:"var(--space-8)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-landing-card-shadow",value:"none",description:"Chrome is a token, default quiet (rule #44): a landing surface is FLAT \u2014 no card elevation \u2014 so a service opts back IN with `--centered-shell-landing-card-shadow: var(--card-shadow)`."},{name:"--centered-shell-landing-heading-size",value:"var(--font-size-display)",description:"Hero heading tier. The preset re-points `--heading-h1` (same mechanism as `.ui-auth-shell` \u2192 `--auth-shell-heading-size`), so a hero title is a real `Heading level={1}` and never a consumer font-size."},{name:"--centered-shell-landing-heading-size-compact",value:"var( --font-size-3xl, calc(var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-landing-background",value:"initial",description:'Role-mirror knob \u2014 MUST stay `initial`, with the role default at the CALL SITE (`var(--centered-shell-landing-background, var(--background))`), so a scoped `[data-tenant]` / `.dark` override of `--background` still reaches it (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Documented default = hsl(var(--background)) \u2014 a public page is the plain page canvas, not the app\'s `--muted` chrome.'},{name:"--app-shell-bar-height",value:"var(--band-height-3xl)",description:"Rule #24 companion (gh#291): on coarse pointers --control-height grows to 2.75rem (44px tap floor), and the shell bar sits flush with the viewport top \u2014 a 3rem bar leaves the control's 3px focus ring painting ABOVE y=0, off-screen, which no overflow setting can recover. 3.5rem gives 6px of breathing per side."},{name:"--app-shell-nav-rail-width",value:"3rem",description:"Same rule #24 companion for the second navigation track: a finger gets the 44px floor back, and the track widens with the cell so the cell is not clipped by the rail it sits in."},{name:"--app-shell-nav-rail-item-size",value:"var(--band-height-xl)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-height",value:"var(--band-height-xl)",description:"And for the Sidebar's own rows (gh#1138): measured 32px under a finger while the Tree rows and SearchInput beside them had already grown to 44 with the control ladder."},{name:"--mobile-shell-block-size",value:"100dvh",description:'MobileShell (gh#354 \xA76) \u2014 the handheld app shell: a status band, an app bar, ONE scroll region, a sticky action bar and a bottom tab bar. Two facts here cannot be reached by composition, which is why they belong to the shell and not to the page: 1. The shell is the only scroll container. The root is exactly one viewport tall (`--mobile-shell-block-size`), so the document itself never scrolls and the chrome bands never leave the screen \u2014 the reason a composed `Card` + `overflow-y-auto` stack drifts on a real phone, where the URL bar collapses under the page. 2. Every band absorbs the device safe-area insets, so a notch never covers the app bar and the home indicator never covers the primary verb. The safe-area knobs are `env()` values and are therefore ZERO on every surface with no insets (desktop, jsdom, the docs frames) \u2014 the geometry below is unchanged there. The INLINE knob takes `max()` of BOTH physical insets on purpose: `env(safe-area-inset-left)` is physical, so binding it to the inline START would be wrong under `dir="rtl"`. A symmetric inset is correct in both writing directions and costs at most a few px on the non-notch side in landscape. A service retunes the page gutter, the three band heights and the block padding from its theme; nothing here is reachable only through a consumer selector.'},{name:"--mobile-shell-max-inline-size",value:"26.875rem",description:'430px \u2014 the widest logical width the current handheld class reports (iPhone Pro Max / Pixel Pro XL). It is a CAP, so it has to sit at or above every real device width the shell is meant to be read at; below that, `width="phone"` would squeeze the very screens it exists to serve. Only `width="phone"` reads it; the default `fill` never does.'},{name:"--mobile-shell-safe-inset-block-start",value:"env(safe-area-inset-top)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-safe-inset-block-end",value:"env(safe-area-inset-bottom)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-safe-inset-inline",value:"max(env(safe-area-inset-left), env(safe-area-inset-right))",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-inset-inline",value:"var(--space-4)",description:"Page gutter shared by every band AND by the scroll region, so the app-bar title, the list rows and the sticky action bar sit on ONE content edge \u2014 the axis gh#330 had to repair for CenteredShell after the bar and the column drifted 8px apart."},{name:"--mobile-shell-control-height",value:"var(--control-height-comfortable)",description:"Touch tier for the WHOLE shell subtree, the same technique `.ui-auth-shell` uses. Rule #24's 44px floor is already reached on a coarse pointer through --control-height, but a handheld app is touch-first BY DEFINITION \u2014 it must not render 32px targets merely because it is being previewed with a mouse, or because a service ships it in an Electron/desktop wrapper."},{name:"--mobile-shell-region-gap",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-status-bar-height",value:"var(--band-height-lg)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-header-bar-height",value:"var(--band-height-3xl)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-tab-bar-height",value:"calc(var(--band-height-3xl) + var(--space-2))",description:"4rem. A tab bar is an icon stacked over a label, so it is one step TALLER than the app bar; there is no 64px band step, so it derives from the 3.5rem one (tier 2a)."},{name:"--mobile-shell-main-padding-block",value:"var(--space-4)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-actions-padding-block",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-foreground",value:"initial",description:"Resting nav row + label (also the resting sub-row). Default = hsl(var(--muted-foreground))."},{name:"--sidebar-nav-item-hover-foreground",value:"initial",description:"Hovered nav row + label. Default = hsl(var(--foreground))."},{name:"--sidebar-nav-item-disabled-foreground",value:"initial",description:"`aria-disabled` nav row + label. Default = the resting row colour."},{name:"--sidebar-nav-icon-foreground",value:"initial",description:"Nav ICON (`.sb-icon`, incl. the collapsed rail and group triggers). Default = currentColor, i.e. the row colour \u2014 the pre-gh#228 look. Set this alone to get canonical dark icons next to muted labels."},{name:"--sidebar-nav-icon-hover-foreground",value:"initial",description:"Icon on a hovered / active / disabled row. Each falls back to --sidebar-nav-icon-foreground, then to currentColor, so setting the base icon knob alone themes every state."},{name:"--sidebar-nav-icon-active-foreground",value:"initial",description:'Sidebar nav-row COLOUR knobs (gh#228). The row/label and its icon are separately themeable: before this, `.sb-nav-item` painted one `--muted-foreground` that the Lucide SVG inherited, so a service could only darken its 16px nav icons by writing page-local CSS or by re-tinting every muted text globally. Geometry knobs (--sidebar-nav-icon-size, --sidebar-nav-item-height/-gap/ -padding-x) live in components/shell.css and are untouched by these. ROLE-MIRROR KNOBS \u2014 declared `initial` here with the role default at the CALL SITE (`var(--knob, hsl(var(--role)))`), so a scoped `[data-tenant]` / `.dark` role override re-resolves live instead of freezing at :root (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Every default is byte-identical to the pre-gh#228 rendering. The ACTIVE row\'s own background/foreground keep their existing knobs (--sidebar-item-active-background / --sidebar-item-active-foreground, components/shell.css); only the active ICON gets a new one.'},{name:"--sidebar-nav-icon-disabled-foreground",value:"initial",description:'Sidebar nav-row COLOUR knobs (gh#228). The row/label and its icon are separately themeable: before this, `.sb-nav-item` painted one `--muted-foreground` that the Lucide SVG inherited, so a service could only darken its 16px nav icons by writing page-local CSS or by re-tinting every muted text globally. Geometry knobs (--sidebar-nav-icon-size, --sidebar-nav-item-height/-gap/ -padding-x) live in components/shell.css and are untouched by these. ROLE-MIRROR KNOBS \u2014 declared `initial` here with the role default at the CALL SITE (`var(--knob, hsl(var(--role)))`), so a scoped `[data-tenant]` / `.dark` role override re-resolves live instead of freezing at :root (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Every default is byte-identical to the pre-gh#228 rendering. The ACTIVE row\'s own background/foreground keep their existing knobs (--sidebar-item-active-background / --sidebar-item-active-foreground, components/shell.css); only the active ICON gets a new one.'},{name:"--table-row-height-compact",value:"var(--band-height-sm)",description:"Table component tokens: row height, cell padding."},{name:"--table-row-height-default",value:"var(--band-height-md)",description:"Table component tokens: row height, cell padding."},{name:"--table-row-height-comfortable",value:"var(--band-height-xl)",description:"Table component tokens: row height, cell padding."},{name:"--table-row-height",value:"calc(var(--table-row-height-default) * var(--scaling))",description:"Table component tokens: row height, cell padding."},{name:"--table-cell-padding-y",value:"var(--space-2)",description:"Table component tokens: row height, cell padding."},{name:"--table-cell-space-x",value:"initial",description:"THE CELL'S INLINE INSET \u2014 and it is the CARD'S inset, not the control's (gh#849). Measured on /showcase/table-pagination at 1440px, gap from the card's inner edge: card header (title / count) 17px table th/td (column text) 13px <- the odd one out pagination footer 17px One card, three horizontal bands, two optical axes. The table read the CONTROL step (--control-padding-x, 12px) while the card read the SECTION step (--card-space-inset -> --space-section-active, 16px), and a table is the flush body of a card more often than it is anything else \u2014 so the two steps meet at the same edge on the most common composition this library ships, and the table sits 4px inboard of the header above it and the footer below it, on BOTH edges. It cannot be settled in the footer: --table-pagination-padding-x defaults to THIS token so the \"rows per page\" label lands on the first column's text axis, so the footer follows the columns by design. Either the cells move to the card's inset or the card's own chrome disagrees with its content forever. IBM Carbon \u2014 this repo's spacing authority (docs/DESIGN-AUTHORITY.md) \u2014 gives DataTable and Tile the same 16px inline inset for exactly this reason. Both 12 and 16 are legal Carbon steps; the RELATIONSHIP is what was wrong, not the number. `initial`, not `var(--space-section-active)`, per docs/TOKENS.md - \"Role-mirror knobs MUST be `initial`\". The old binding was a :root var() and it FROZE: probed in Chromium, setting --control-padding-x on the card left the cell padding at 12px, and on a subtree with --scaling .92 the control step resolved to 11.04px while the cell still used the root's unscaled 12px. A token that claims to track another and silently does not is worse than one that never claimed it. default = var(--space-section-active)"},{name:"--table-cell-indent-space-step",value:"var(--space-4)",description:"Hierarchy indent step for `<TableCell indent={depth}>` (gh#354). The cell's inset is `--table-cell-space-x + depth \xD7 this step`, so level 0 sits exactly on the column's own text axis and every further level is one step in. Owned here rather than as a magic expression in JSX (the trap `--tree-select-depth-space-step` was pulled out of), so a denser service dials the step down \u2014 or to `0` for a flat table \u2014 without touching a call site."},{name:"--table-border-color",value:"initial",description:"Cell-grid rule colour for `<Table bordered>` (gh#274) \u2014 the outer frame and the vertical rules between columns. Declared `initial` so the default re-resolves to the LIVE --border role at the call site (a :root binding to hsl(var(--border)) freezes at the :root value and a scoped [data-tenant] override of --border would never reach it \u2014 docs/TOKENS.md). Default = hsl(var(--border))."},{name:"--table-pagination-padding-y",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-pagination-padding-x",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-surface-min-inline-size",value:"640px",description:'DataTable surface \u2014 narrow-viewport legibility FLOOR (gh#253). Below the `sm` viewport step a multi-column admin grid whose columns are `white-space: nowrap` would otherwise be crushed, so the bordered surface keeps a minimum inline size and `.ui-data-table-scroll` scrolls instead. This shipped as a hard-coded `min-w-[640px]` utility on the surface element, which left a service that wants a narrower (or no) floor with no route but forking the component (#45). Default = the previous literal, in px so the floor releases at EXACTLY the same width as the px-based `sm` media query that clears it (a rem value would drift under a non-16px root and re-introduce the scroll between the two thresholds). Set `0` to opt out entirely \u2014 which is what `preset="action-collection"` does, because there the priority measures own the width.'},{name:"--table-head-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Table component tokens: row height, cell padding."},{name:"--table-head-font-weight",value:"var(--font-weight-medium)",description:"Header WEIGHT (gh#410). Was the literal `var(--font-weight-medium)` in table-layout.css, which left a service that wants a quiet header row writing `font-normal` on every `<TableHead>` \u2014 18 of them in the app that reported this. Default is byte-identical; a quiet header is now one declaration (`--table-head-font-weight: var(--font-weight-normal)`)."},{name:"--table-header-background",value:"initial",description:"Header band \u2014 its OWN bg + fg knobs (decoupled from --secondary). Declared `initial` so the default re-resolves to the LIVE --muted / --muted-foreground roles at the call site: a :root binding to a role var freezes at the :root value and a scoped [data-tenant] role override never reaches it. A brand sets both header tokens together to keep band/text contrast. Defaults = hsl(var(--muted)) band \xB7 hsl(var(--muted-foreground)) text."},{name:"--table-header-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--table-header-foreground",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-surface-background",value:"initial",description:"THE DATATABLE FRAME ITSELF (gh#880). Every band, row state and header inside the table has had a knob for some time; the box that draws the frame around them had none and painted no fill at all, so a themed page could retint the contents of a table and not the table. Unset, the declaration is invalid-at-computed-value-time and `background-color` keeps its own initial `transparent` \u2014 which is exactly what the surface painted before, so nothing moves. default = transparent, i.e. what the frame already had"},{name:"--table-surface-background-alpha",value:"initial",description:"`initial` keeps the shipped contract: with no fill asked for, the whole declaration is invalid-at-computed-value-time and the surface stays transparent."},{name:"--table-surface-backdrop-blur-size",value:"initial",description:"GLASS \u2014 `initial`, no blur and no backdrop root. A DataTable holds sticky/pinned columns; a backdrop root here would change what `position: fixed` inside the frame resolves against. default = none \u2014 the frame blurs nothing"},{name:"--table-pin-shadow",value:"-6px 0 6px -5px hsl(var(--foreground) / 0.12)",description:"Inline-end shadow that lifts a pinned (sticky) action column off the body it scrolls over."},{name:"--table-fixed-shadow-start",value:"6px 0 6px -5px hsl(var(--foreground) / 0.12)",description:'The same lift for a column frozen to the inline START (antd `fixed: "start"`), pointing the other way. `box-shadow` has no logical offset, so the writing direction needs its own value \u2014 the RTL companion is a token rather than a literal in the stylesheet so a service that retunes one edge cannot leave the other behind.'},{name:"--table-fixed-shadow-start-rtl",value:"-6px 0 6px -5px hsl(var(--foreground) / 0.12)",description:"Table component tokens: row height, cell padding."},{name:"--table-expand-column-width",value:"2.5rem",description:"Leading column that carries the expand affordance (antd `expandable`). Sized like the selection column beside it so the two leading columns read as one gutter."},{name:"--table-summary-background",value:"initial",description:"Footer totals row (antd `summary`). `initial` so the --muted default re-resolves under a scoped theme, exactly like the row-state washes above. Default = hsl(var(--muted))."},{name:"--table-summary-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--table-row-expanded-background",value:"initial",description:"Wash behind an expanded detail row, so the panel reads as belonging to the row above it. Default = hsl(var(--muted) / 0.3), the same weight as the selected-row tint. It fades out as --table-row-striped-alpha comes in: on a striped table the stripe ties the panel to its row."},{name:"--table-row-expanded-padding",value:"initial",description:"Inset of the expanded detail cell (gh#1083). `initial` so the default \u2014 the cell's own padding, var(--table-cell-padding-y) var(--table-cell-space-x), which follows density \u2014 re-resolves at the call site. `expandable.flush` drops it."},{name:"--table-selection-menu-gap",value:"var(--space-1)",description:"Gap between the header checkbox and the `selections` dropdown trigger beside it."},{name:"--table-row-striped-background",value:"initial",description:"Row-state tint washes \u2014 translucent muted over the opaque base. `initial` so the --muted default re-resolves under a scoped theme; a service retints by reading another role (e.g. --primary). Defaults = hsl(var(--muted) / 0.8) striped \xB7 hsl(var(--accent) / 0.7) hover \xB7 hsl(var(--muted) / 0.3) selected. The stripe was --muted / 0.4 until gh#700 measured it: 1.02:1 against the plain row in light, i.e. not a stripe. 0.8 is the strongest --muted step that keeps every text role on it at AA with the control boundary still at 3:1 (muted-foreground 5.29 light / 5.71 dark, --input 3.24 / 3.31) and leaves the --accent hover a visible step beyond it in both themes \u2014 src/tokens/__tests__/table-stripe-contrast.test.ts recomputes all of it."},{name:"--table-row-striped-alpha",value:"0%",description:"Zebra SWITCH (gh#700) \u2014 how much of --table-row-striped-background every EVEN logical body row paints: `0%` = no stripe (the default, byte-identical to an unstriped table), `100%` = the full stripe. It is the percentage a `color-mix(\u2026 , transparent)` reads at the row, so it is a ratio and not a flag: a theme may also dial a lighter stripe (`60%`). It is a SHARE OF the stripe colour rather than the resulting alpha (gh#886) \u2014 the base default `hsl(var(--muted) / 0.8)` already carries an alpha, so `100%` composites to 0.8 and `60%` to 0.48. THE SERVICE-WIDE DEFAULT IS THIS ONE LINE: `:root { --table-row-striped-alpha: 100%; }` stripes every Table and DataTable. The `striped` prop is the per-instance override on top of it \u2014 `striped` sets `100%` on that table, `striped={false}` sets `0%`, and leaving the prop out inherits whatever the theme chose. A plain length is not a role mirror, so it lives on :root without the freeze rule (docs/TOKENS.md)."},{name:"--table-row-hover-background",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-row-hover-background-alpha",value:"initial",description:"default = 0.7 at the call site"},{name:"--table-row-selected-background",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-row-selected-background-alpha",value:"initial",description:"default = 0.3 at the call site"},{name:"--table-action-collection-primary-width",value:"18%",description:'Table \xB7 action-collection preset (gh#253) \u2014 the canonical dense approval / action queue. Column PRIORITY measures replace the desktop intrinsic widths (a nowrap free-text column is what makes a five-column queue wider than its card and forces a horizontal scroll). Nothing here is read unless `preset="action-collection"` is set, so every existing table is untouched. Percentages so the ratio holds at any card width; the action affordance is an absolute measure because it must never be squeezed below its touch target. requester / subject'},{name:"--table-action-collection-secondary-width",value:"22%",description:"target / resource"},{name:"--table-action-collection-meta-width",value:"12%",description:"timestamps, ids \u2014 lowest priority"},{name:"--table-action-collection-actions-width",value:"3.5rem",description:"row-action affordance: a FLOOR, not a cap \u2014 Table grows the column to a wider actions cell content (a text button + `\u2026` menu), gh#1067"},{name:"--table-action-collection-primary-width-compact",value:"24%",description:"Compact tier, applied below the collapse step (the 390px acceptance frame). Percentages, like the desktop tier: while the priority ratios FIT (the canonical queues up to the six-column budget below), they keep the table filling its container edge-to-edge with no horizontal scroll \u2014 the gh#253 acceptance."},{name:"--table-action-collection-secondary-width-compact",value:"22%",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-meta-width-compact",value:"20%",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-actions-width-compact",value:"2.75rem",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-primary-width-floor",value:"6rem",description:'Wide-collection FLOORS \u2014 the compact measures wherever the priority budget is OVER-SUBSCRIBED (gh#262, gh#844). Percentage measures stop working once a queue carries enough columns for the shares to sum past 100%: `table-layout: fixed` NORMALIZES them back into the table\'s specified width, so at ~10 columns on a 390px frame a "24%" column really renders at a tenth of the frame, every column drops below one CJK glyph, and JA headers shred into a vertical one-character-per-line column (the failure mode WCAG 2.2 SC 1.4.10 Reflow exists to prevent). Cell `min-inline-size` is inert in the fixed algorithm, `max(%, length)` resolves to neither operand (below), and the intrinsic (max-content) size of a fixed-layout table is degenerate \u2014 all in Chromium \u2014 so a LENGTH is the only floor an engine respects: length columns are never squeezed, and when their sum outgrows the container the table\'s used width grows past its specified 100% (CSS 2.1 \xA717.5.2.1) into the keyboard-reachable overflow-x wrapper, which scrolls. ONE-dimensional scrolling of a data table is explicitly permitted by SC 1.4.10; one-character-per-line is not readable at all. The stylesheet switches tiers on the BUDGET, not on width. The budget is one column per priority tier plus one free-text column; the floors engage wherever a queue asks for more than that, and a queue that fits it keeps its scroll-free percent tier byte-for-byte. Two ways to ask for more, and gh#262 only saw the first: SEVEN COLUMNS. With five distinct column kinds, seven columns must repeat something, so the shares are guaranteed to over-sum (gh#262 expectation 3). A REPEATED TIER, at ANY column count (gh#844). The compact measures are per-column percentages, NOT shares of a sum: a `primary` column is 24% of the table whether the table has three columns or six. So the column count does not predict readability at all \u2014 what over-subscribes the budget is repeating a tier, and the surplus comes out of the `auto` free-text column. Measured at 390 with a 340px card content box, a FIVE-column JA queue carrying two `meta` columns left its free-text column 47.6px wide: 15 glyphs over 8 line boxes, 1.9 characters per line \u2014 the same shred gh#262 fixed at ten columns, three columns below the ceiling that was supposed to make it impossible. The same queue on the floors is 4.75 characters per line and scrolls, which is the trade SC 1.4.10 already sanctions above. `max(%, length)` is not an alternative to the switch. It is not merely ignored: in the fixed algorithm Chromium resolves `max(24%, 6rem)` on a 340px table to 113px \u2014 neither the 81.6px percentage nor the 96px floor \u2014 so it cannot express "this column, floored". Units are rem, not ch: `ch` tracks the "0" glyph (~half a CJK em), so a ch-denominated floor would silently halve for the JA copy these floors exist to protect. At the compact type tier (font-size-xs = 0.75rem, space-2 inline padding each side) the 5rem meta floor keeps a ~4rem text measure = 5 full-width glyphs per line \u2014 a JA header wraps to two readable lines, never a character column.'},{name:"--table-action-collection-secondary-width-floor",value:"5.5rem",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-meta-width-floor",value:"5rem",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-flex-width-floor",value:"5rem",description:"Floor for a column with NO `priority` (the free-text column, `auto` up to the budget). It cannot stay `auto` past the budget: once the marked columns over-constrain the table, the fixed algorithm hands an auto column exactly 0px (verified in Chromium) \u2014 the same shredding, moved to the free-text column. The actions floor is simply `--table-action-collection-actions-width-compact`, already an absolute measure."},{name:"--table-action-collection-font-size-compact",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-cell-space-x-compact",value:"var(--space-2)",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-cell-padding-y-compact",value:"var(--space-2)",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-row-height-compact",value:"var(--table-row-height-compact)",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-min-inline-size-compact",value:"0",description:'Compact-tier LEGIBILITY FLOOR \u2014 the measure below which the preset stops fitting the table to its container and lets the scroll region it already owns take over. The percentage budget above is sized for ONE column per priority tier plus one free-text column. A queue that repeats a tier \u2014 two `secondary` columns, three `meta` columns, or an unmarked column beside them \u2014 asks for more than 100%, and under `table-layout: fixed` the surplus is taken out of the columns rather than out of the table: measured on a seven-column Japanese admin queue at 390, every column landed at 44\u201359px and CJK labels wrapped at ONE to TWO characters per line (dxs-platform/platform#680). That is a WCAG 2.2 SC 1.4.10 Reflow (AA) failure, and it is the failure mode this floor removes. Scrolling is the correct escape, not a concession: SC 1.4.10 exempts "parts of the content which require two-dimensional layout for usage or meaning", and its own note names data tables as the example. A table that scrolls horizontally inside its card conforms; a table whose cells are one character wide does not. Default `0` so nothing changes for any existing consumer: a queue that fits its priority budget keeps fitting. A consumer whose queue carries more columns than the budget sets this to the measure at which its narrowest column is still readable (roughly 5rem per column for Japanese at the compact type tier) and the table scrolls instead of crushing.'},{name:"--table-stacked-collection-card-padding-y",value:"var(--space-stack-sm)",description:"Table \xB7 stacked-record-collection preset (gh#293 restore \u2014 SCR-215) \u2014 the canonical WIDE, heterogeneous record collection. Below the collapse step every `<tr>` becomes a bordered key-value card; these tokens own the card's own geometry (unlike action-collection, there is no column-priority measure to retune \u2014 the whole row becomes one block)."},{name:"--table-stacked-collection-card-padding-x",value:"var(--space-inline-md)",description:"Table component tokens: row height, cell padding."},{name:"--table-stacked-collection-card-gap",value:"var(--space-stack-sm)",description:"Table component tokens: row height, cell padding."},{name:"--table-stacked-collection-cell-padding-y",value:"var(--space-stack-xs)",description:"Table component tokens: row height, cell padding."},{name:"--table-stacked-collection-cell-padding-x",value:"0",description:"Inline inset of a folded cell inside its card (gh#1102). 0: the card's own --table-stacked-collection-card-padding-x is the inset, so a value line gets the card's full content width instead of losing the table's cell padding on both sides."},{name:"--table-stacked-collection-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Table component tokens: row height, cell padding."},{name:"--table-select-column-width",value:"2.5rem",description:"DATA TABLE odds and ends that were still literal on the component (#319). The table's cell rhythm, widths and action-collection tiers were already tokenized; these are the pieces around them \u2014 the select column, sort glyphs, sticky header layer and skeleton shapes."},{name:"--table-sort-icon-size",value:"var(--icon-size-xs)",description:"Table component tokens: row height, cell padding."},{name:"--table-toolbar-icon-size",value:"var(--icon-size-md)",description:"Table component tokens: row height, cell padding."},{name:"--table-pagination-icon-size",value:"var(--icon-size-md)",description:"Table component tokens: row height, cell padding."},{name:"--table-pagination-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Table component tokens: row height, cell padding."},{name:"--table-skeleton-check-size",value:"1rem",description:"Skeleton placeholders mimic the real content they stand in for: a checkbox square and a text line at the row's cap height. Retune with --table-cell-padding-y to keep the loading state the same height as the loaded one."},{name:"--table-skeleton-line-block-size",value:"1rem",description:"The skeleton bar's BLOCK SIZE. `--table-skeleton-line-height` was a length on the line-height axis, whose scale is unitless ratios (gh#324) \u2014 a mis-named height, and the only raw value on that axis, which is what kept the axis ungated. Renamed rather than left, with the old name kept as a DEPRECATED ALIAS: it is a published token a consumer theme may already override, and styles/table-layout.css still reads the old name, so an override of either spelling keeps working. Prefer the new name; the alias may be removed in a future major."},{name:"--table-skeleton-line-height",value:"var(--table-skeleton-line-block-size)",description:"Table component tokens: row height, cell padding."},{name:"--table-skeleton-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--table-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"The table's own base type step (gh#319). Was a `text-sm` utility on the <table>; the theme remaps `--text-sm` to `--font-size-sm`, so this default is byte-identical."},{name:"--table-line-height",value:"calc(1.25 / 0.875)",description:"MANDATORY companion to --table-font-size \u2014 the gh#260 trap, again. `text-sm` also set line-height from Tailwind's `--text-sm--line-height`, and styles/base.css remaps `--text-sm` but NOT that companion. Without this the table would silently inherit ambient page leading the moment the font-size moved into CSS. Same unitless ratio Tailwind ships."},{name:"--table-row-border-width",value:"initial",description:'Horizontal row rule (chrome, #44) \u2014 the divider between body rows AND under the header row. Owned here rather than as TableRow\'s `border-b` utility so the "last row draws no rule" rule in `@layer components` can actually zero it; a utility would outrank it by layer. Colour is deliberately NOT set: it inherits the global `* { border-color: hsl(var(--border)) }` so a scoped [data-tenant]/.dark override of --border still reaches every row. default = var(--stroke-hairline), resolved at the call site (gh#906)'},{name:"--table-flush-divider-width",value:"var(--table-row-border-width, var(--stroke-hairline))",description:"Flush divider (chrome, #44/#45) \u2014 the ONE edge a full-bleed table keeps when it sits inside `<CardContent flush>`: the line between a plain CardHeader and the first row. The other three edges coincide with the card's own frame and are erased (gh#305); this one has nothing behind it, so without it the header band floats (gh#306). Scoped by construction to the case that needs it \u2014 a BANDED header, a CardBar or a headerless card already draw their own line there and never reach this token \u2014 so a service tunes only the plain-header divider: `0` for a borderless full-bleed table, heavier for a stronger band. Colour and style are NOT set here: only the width is restored, so the surface's own border declaration still owns them and a scoped [data-tenant]/.dark override of --border reaches it. Default = the same hairline the table's other rules draw."},{name:"--table-row-tone-rail-width",value:"initial",description:"Row TONE (`rowTone`) \u2014 the leading-edge rail plus the wash behind a row in a named state. The rail measure is `--card-accent-rail-width`'s own step so a toned row and a toned Card read as the same mark at the same weight; it is spelled out rather than referenced because a service that thins its card rails should not silently thin its table rails too. The wash is deliberately weak: it must stay under the selected-row fill (which is a stronger statement about the same row) and must not carry meaning on its own \u2014 that is what the rail and the row's own status cell are for. default = var(--stroke-2xl), resolved at the call site (gh#906)"},{name:"--table-row-tone-wash-alpha",value:"0.06",description:"Table component tokens: row height, cell padding."},{name:"--text-link-underline-offset",value:"0.18em",description:"Distance from the text baseline to the underline. In `em` on purpose: the rule has to stay proportional across the seven type steps, and a px value that reads right at `lg` crowds the descenders at `2xs`. GoDX v2.3 guideline: `.gx a { text-underline-offset: .18em }`"},{name:"--text-link-underline-width",value:"auto",description:"`auto` lets the face decide; a theme that wants a heavier rule names a length."},{name:"--text-link-decoration-line",value:"underline",description:'THE LINK IS UNDERLINED AT REST, and the default is a measurement, not a taste (gh#664). It was `none` with the rule added only on hover/focus, so a link inside a sentence differed from the words around it by hue alone \u2014 and that hue is 1.87:1 against body ink in light, 1.54:1 in dark. WCAG 1.4.1 lets colour carry a link on its own only at 3:1 (technique G183), so the old default failed it everywhere a link sat in running text. The consumer met it for real: "97 ng\u01B0\u1EDDi \u0111ang d\xF9ng" read as plain copy and nobody clicked it (godx-jp/id#1419). The v2.3 guideline agrees: `.gx a` never removes the UA underline, and its prose says "Ch\u1EEF link c\xF3 g\u1EA1ch ch\xE2n". `none` is still a legal value, because a link in a nav row or a card title carries its affordance some other way. It is NOT a style knob for running text: at the shipped colours it re-opens the 1.4.1 failure this default closes.'},{name:"--text-action-gap",value:"var(--space-1)",description:"Gap between the text and the operation cluster, and between the operations."},{name:"--text-action-color",value:"initial",description:"The operation reads as a link, because that is what it is \u2014 an affordance inside running text, not a control box. Same reasoning as `Text`'s own `link` prop. default = hsl(var(--primary)), resolved at the call site"},{name:"--text-action-color-hover",value:"initial",description:"default = the live primary hover, resolved at the call site \u2014 a `:root` binding would freeze on the root's primary and ignore a scoped re-theme (docs/TOKENS.md, the freeze rule; gh#678)"},{name:"--text-action-size",value:"1em",description:'The icon box tracks the run it sits in: `em`, so a copy button beside `size="2xs"` shrinks with it instead of towering over the text.'},{name:"--text-mark-background",value:"hsl(var(--warning))",description:"`<mark>` is a FILL plus the label measured against it \u2014 `--warning` / `--warning-foreground` are exactly that pair. NOT `--text-warning`, which is the AA-safe INK tier and would paint a dark yellow highlight with dark text on it."},{name:"--text-mark-foreground",value:"hsl(var(--warning-foreground))",description:"TEXT \u2014 knobs for the typographic primitive's link affordance. Size, weight and tone are NOT here: they are the foundation's own `--font-size-*`, `--font-weight-*` and the semantic foreground roles, read directly by `styles/text-layout.css`. A link adds two things those tiers do not describe \u2014 how far the rule sits from the baseline, and how heavy it is."},{name:"--thought-chain-gap",value:"var(--space-4)",description:"Gap between two steps, and between the glyph column and the body."},{name:"--thought-chain-node-gap",value:"var(--space-3)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-body-gap",value:"var(--space-1)",description:"Gap between the header, the body and the footer of ONE step."},{name:"--thought-chain-icon-size",value:"var(--band-height-sm)",description:"The glyph column. A square, so an ordinal, an icon and a status mark share one track and the connector below stays centred under all three. It reads the BAND height, not an icon step, so the circle matches the title band it sits beside; 24px and 36px are the nearest steps and both would break that alignment to buy nothing. scale-exempt: 28px ordinal medallion sized to the title band, not a glyph"},{name:"--thought-chain-icon-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-icon-radius",value:"var(--radius-pill)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-icon-background",value:"initial",description:"Role-mirror knobs (docs/TOKENS.md): `initial`, so each documented default resolves at the CALL SITE and a scoped `[data-tenant]` / `.dark` override still reaches it. Default ground = hsl(var(--muted)) \xB7 default ink = hsl(var(--muted-foreground))"},{name:"--thought-chain-icon-color",value:"initial",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-icon-success-color",value:"initial",description:"Status tints. Same three roles the rest of the library uses for the same three meanings."},{name:"--thought-chain-icon-error-color",value:"initial",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-line-width",value:"initial",description:"The connector. Its inline position tracks HALF the glyph column so it stays centred whatever the column's size becomes \u2014 never a literal offset. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--thought-chain-line-color",value:"initial",description:"default = hsl(var(--border))"},{name:"--thought-chain-chevron-size",value:"var(--icon-size-sm)",description:"The collapsed body and its chevron."},{name:"--thought-chain-content-space-block",value:"var(--space-2)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-item-gap",value:"var(--space-2)",description:"A STANDALONE step (ThoughtChainItem) \u2014 the chip an assistant drops inline."},{name:"--thought-chain-item-padding-block",value:"var(--space-2)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-item-padding-inline",value:"var(--space-3)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--thought-chain-item-solid-background",value:"initial",description:"default = hsl(var(--muted))"},{name:"--thought-chain-item-outlined-border",value:"initial",description:"default = hairline solid hsl(var(--border))"},{name:"--toggle-count-min-width",value:"var(--space-4)",description:"\u2500\u2500 Counter pill \xB7 geometry. One knob per component (rule #45, and the repo's existing shape: --button-count-*, --tag-input-chip-font-size, --toggle-sm-font-size are all independent knobs off the same primitive scale). The VALUES are byte-identical to Button's counter pill and read the same primitive tokens, so the two pills render the same size and a Toggle count set beside a Button count is indistinguishable \u2014 asserted by src/styles/__tests__/toggle-count-token-parity.test.ts so it cannot drift silently. (They are concrete here rather than `initial` + a call-site `var(--toggle-\u2026, var(--button-\u2026))` fallback because check:typography requires a bare `var(--token)` for every font-size, and a split shape across the five geometry knobs would be worse than a consistent one.)"},{name:"--toggle-count-space-inline",value:"var(--space-1)",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-count-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-count-radius",value:"var(--radius-pill)",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-count-gap",value:"0",description:"Quiet default (#44) \u2014 the toggle's own flex gap already separates label from pill; this knob ADDS to it for a service whose design grid wants the counter pushed further out."},{name:"--toggle-count-background",value:"initial",description:"\u2500\u2500 Counter pill \xB7 unpressed colours. Defaults = hsl(var(--muted)) fill (quiet: 1.09:1 against the chip's own surface, so at rest the count reads as text, #44) and hsl(var(--foreground)) text (14.25:1 on that fill). Opaque on purpose \u2014 a translucent fill would take its contrast from whatever surface the chip currently has, and lose ~0.7 on hover."},{name:"--toggle-count-color",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-soft-background",value:"initial",description:'\u2500\u2500 `soft` \xB7 the REST surface (gh#734). Defaults = hsl(var(--secondary)) fill with hsl(var(--secondary-foreground)) text \u2014 the pair `Badge variant="secondary"` and `.ui-button--secondary` already paint, so a chip, a badge and a button on one row are one family and a service that re-themes `--secondary` moves all three at once. The hover step is the OPAQUE `--secondary-hover`, not a translucent tint, because a chip row sits on the page and inside a Card and a translucent hover would read differently on each. Role-mirror knobs \u2014 `initial` here with the role at the call site (docs/TOKENS.md).'},{name:"--toggle-soft-color",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-soft-hover-background",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-soft-count-background",value:"initial",description:"The `soft` chip's own counter pill. Defaults = hsl(var(--background)) fill, hsl(var(--foreground)) text. It cannot inherit the generic `--muted` fill above: `--muted` and `--secondary` are the same value in the shipped theme, so that pill would measure 1.00:1 on a soft chip and vanish."},{name:"--toggle-soft-count-color",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-pressed-count-background",value:"initial",description:"\u2500\u2500 Counter pill \xB7 PRESSED colours. Defaults = hsl(var(--primary-foreground)) fill, hsl(var(--primary)) text \u2014 the pressed chip's OWN pair, swapped. Not `--primary` on `--primary`: the pressed chip is already filled with --primary, so a --primary pill would be invisible on it. The swap also flips the pill from near-invisible to solid, which is one of the encodings that keeps the pressed state off colour alone (WCAG 1.4.1)."},{name:"--toggle-pressed-count-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--toggle-pressed-count-color",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-pressed-border-color",value:"initial",description:"\u2500\u2500 Pressed chrome. Default = hsl(var(--primary)), i.e. the pressed fill itself, so out of the box this border is quiet (#44) and the pressed state is carried by the fill inversion + the pill inversion + the forced-colors rule below. A service whose pressed fill is a PALE tint (where those inversions get weak) opts into a visible outline by overriding this."},{name:"--toggle-pressed-border-color-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--toggle-count-forced-outline-width",value:"initial",description:"Under forced-colors every fill is flattened to a system colour, so neither inversion encodes anything any more. This outline is the state's structural fallback there \u2014 drawn on the PRESSED pill only, and as `outline` (not `border`) so it costs no layout. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--tree-node-height",value:"initial",description:"Row box height. MIRRORS THE `--control-height` TIER \u2014 the row is a control-sized hit target, and the tier is density-aware, so the height is never a literal and never an ad-hoc `calc(var(--control-height) \xB1 \u2026)` (that re-derives a tier and drifts out of step with the controls beside it). `size` picks a NAMED step (`--control-height-{xs,sm,lg}`) at the call site; the tier is re-scoped by the auth shells, hence `initial` here. Documented default: --tree-node-height = var(--control-height)."},{name:"--tree-indent-width",value:"var(--space-5)",description:'Indent per level. Drives `padding-inline-start` on the row \u2014 a LOGICAL property, so the outline flips under `dir="rtl"` with no second rule.'},{name:"--tree-node-padding-inline",value:"var(--space-2)",description:"Inline padding inside a row, the gap between switcher / checkbox / icon / label, and the row's corner. Pure geometry \u2014 no role to freeze, so these bind directly."},{name:"--tree-node-gap",value:"var(--space-2)",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-node-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--tree-node-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-switcher-size",value:"1.25rem",description:'The disclosure triangle (NameThatUI: "disclosure triangle"; an indented tree that expands is an "Outline View"). Its box is what makes the switcher a real 24px-class target inside the row, so it is a knob, not a hardcoded icon size.'},{name:"--tree-switcher-color",value:"initial",description:"Documented default: --tree-switcher-color = hsl(var(--muted-foreground))."},{name:"--tree-icon-size",value:"var(--icon-size-md)",description:'Node glyph (`showIcon`, and the folder/file pair of `variant="directory"`).'},{name:"--tree-line-color",value:"initial",description:"Documented default: --tree-line-color = hsl(var(--border))."},{name:"--tree-divider-color",value:"initial",description:"Documented default: --tree-divider-color = hsl(var(--border))."},{name:"--tree-node-hover-background",value:"initial",description:"Row states. Both mirror roles, so both are `initial` with the role read at the call site. Documented defaults: --tree-node-hover-background = hsl(var(--accent)); --tree-node-selected-background = hsl(var(--accent)); --tree-node-selected-foreground = hsl(var(--accent-foreground))."},{name:"--tree-node-hover-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tree-node-selected-background",value:"initial",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-node-selected-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tree-node-selected-foreground",value:"initial",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-node-filter-foreground",value:"initial",description:"Label of a node `filterTreeNode` matched (antd `.filter-node` title: primary colour, strong weight). A role mirror, so `initial` with the role at the call site. Documented default: --tree-node-filter-foreground = hsl(var(--text-brand, var(--primary)))."},{name:"--tree-drop-indicator-color",value:"initial",description:"Drop indicator of a `draggable` tree (gh#1093): the gap line / inside frame. A role mirror, so `initial` with the role at the call site. Documented defaults: --tree-drop-indicator-color = hsl(var(--primary)); --tree-drop-indicator-width = var(--stroke-md)."},{name:"--tree-drop-indicator-width",value:"initial",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-loading-bar-inline-size",value:"40%",description:'Width of the indeterminate bar shown while `loadData` resolves a branch. A fraction, not a length: it has to read as "part of a row" at every row width and every density.'},{name:"--upload-dropzone-space-inset",value:"var(--space-10)",description:"DROPZONE \u2014 the large drag target. Its inset is deliberately generous; a dense service dials it back with one override instead of forking the variant."},{name:"--upload-dropzone-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--upload-dropzone-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--upload-dropzone-icon-size",value:"var(--icon-size-3xl)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-dropzone-hint-space-block-start",value:"var(--space-3)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-dropzone-hint-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-dropzone-meta-space-block-start",value:"var(--space-1)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-dropzone-meta-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-size",value:"6rem",description:'TILE \u2014 the 96px square shared by picture-card thumbnails and the "add image" button. One knob resizes the whole gallery; picture-card grids are the most common thing a service re-grids to match its own column rhythm.'},{name:"--upload-tile-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--upload-tile-space-gap",value:"var(--space-3)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-icon-size",value:"var(--icon-size-xl)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-label-space-block-start",value:"var(--space-1)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-overlay-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-overlay-background",value:"initial",description:"Busy scrim over a tile/frame \u2014 role-mirror knob, `initial` so --background re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme. Default = hsl(var(--background) / 0.7)."},{name:"--upload-overlay-alpha",value:"70%",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-remove-space-inset",value:"var(--space-1)",description:"REMOVE affordance \u2014 the \u2715 / trash chip pinned to a tile or avatar."},{name:"--upload-remove-offset",value:"var(--space-1)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-remove-icon-size",value:"var(--icon-size-sm)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-max-width",value:"20rem",description:"PICTURE \u2014 the single wide preview variant."},{name:"--upload-picture-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--upload-picture-preview-max-height",value:"12rem",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-empty-height",value:"8rem",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-icon-size",value:"var(--icon-size-2xl)",description:"The empty-state mark. It was `controlIconClass` \u2014 a CONTROL height (32px) leaking into a media placeholder, and 32 is not a step of the icon scale at all. The 128px-tall empty box sits between the 96px tile (24) and the 185px dropzone (40), so its mark does too."},{name:"--upload-picture-empty-label-space-block-start",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-empty-label-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-overlay-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-badge-radius",value:"initial",description:'"Pending replace" chip. The radius previously came from a bare `rounded`, which resolves to a flat .25rem and so ignored the radius scale entirely \u2014 the exact shape of a rule #44 miss. It now follows the tile radius like every other chip in the component. gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))'},{name:"--upload-picture-badge-offset",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-badge-space-inline",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-badge-space-block",value:"0.125rem",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-badge-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-avatar-size",value:"6rem",description:"AVATAR \u2014 the round single-image variant."},{name:"--upload-avatar-icon-size",value:"var(--icon-size-xl)",description:"The camera mark inside the empty avatar. Same step as --upload-tile-icon-size on purpose: the avatar and the picture-card tile are the SAME 96px box, and they were drawing 32 and 24."},{name:"--upload-avatar-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--upload-avatar-change-space-block",value:"var(--space-1)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-avatar-change-background",value:"rgb(0 0 0 / 0.7)",description:'The "change" strip sits ON the photo, so its scrim is intentionally a fixed dark wash rather than a surface role \u2014 it must stay legible over an arbitrary user image in either theme.'},{name:"--upload-avatar-change-foreground",value:"#fff",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-avatar-pending-delete-alpha",value:"0.4",description:"Alpha of an image the user has marked for deletion but not yet committed."},{name:"--upload-draft-space-inline",value:"var(--space-3)",description:"DRAFT BAR \u2014 the undo strip shown after a pending remove/replace."},{name:"--upload-draft-space-block",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-draft-space-gap",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-draft-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--upload-draft-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-draft-icon-size",value:"var(--icon-size-sm)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-row-space-inline",value:"var(--space-3)",description:"FILE ROW \u2014 the list rendered under the dropzone/button variants."},{name:"--upload-row-space-block",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-row-space-gap",value:"var(--space-3)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-row-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--upload-row-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-row-icon-size",value:"var(--icon-size-md)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-crop-dialog-max-width",value:"24rem",description:"CROP DIALOG \u2014 the 1:1 avatar cropper (`UploadCropDialog`). The 66-literal upload pass above never reached this file, so the whole cropper was still baked on the component: the dialog was pinned to `max-w-sm`, the round preview to `size-48`, the zoom row to `px-2`. An avatar is one of the most service-specific sizes there is (a 96px tile service wants a smaller crop stage than a 200px one), and the crop stage must stay in proportion with --upload-avatar-size \u2014 which is exactly the pair rule #45 exists to keep tunable together. The dialog width intentionally stays a knob of its own rather than reading --dialog-width-default: the cropper is deliberately NARROWER than a normal dialog so the round stage reads as the subject, not as a small element in a wide box."},{name:"--upload-crop-preview-size",value:"12rem",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-crop-preview-radius",value:"var(--radius-pill)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-crop-zoom-space-inline",value:"var(--space-2)",description:"Zoom row inset \u2014 the slider is inset from the dialog edge so its thumb's focus ring is never flush against the dialog padding."},{name:"--welcome-gap",value:"var(--space-4)",description:"Gap between the glyph column and the text column."},{name:"--welcome-content-gap",value:"var(--space-1)",description:"Gap between the title row and the description."},{name:"--welcome-title-gap",value:"var(--space-3)",description:"Gap between the title and the `extra` slot on the title row."},{name:"--welcome-padding-block",value:"var(--space-4)",description:"Inset of the `filled` form. `borderless` drops it to zero."},{name:"--welcome-padding-inline",value:"var(--space-4)",description:"Welcome component tokens \u2014 the greeting block at the head of an empty conversation (Ant Design X `Welcome`). Ant X retunes this block through `styles={{ root, icon, title, description, extra }}`. This file is the answer instead (rules #44/#45): a service sets the knob once in its theme.css and every Welcome on every surface follows."},{name:"--welcome-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--welcome-icon-size",value:"var(--icon-size-xl)",description:"The glyph column. A square, so an image icon and an SVG icon occupy the same track."},{name:"--welcome-filled-background",value:"initial",description:"`filled` chrome. Role-mirror knobs (docs/TOKENS.md): `initial` so the documented default resolves at the CALL SITE and a scoped `[data-tenant]` / `.dark` override still reaches it. Default ground = hsl(var(--muted))"},{name:"--welcome-filled-border",value:"initial",description:"`outlined` is not an Ant X variant; the hairline below belongs to `filled` only."}];var u={issue:"https://github.com/godx-jp/godxjp-ui/issues/163",standard:"docs/FRAME-COVERAGE-STANDARD.md",ledger:"preview/frame-coverage.ledger.json",recordedAt:"2026-09-12",warning:"UNTESTED means no executed case demonstrates this dimension. It is NOT a pass. Do not infer support from a happy-path example, a similarly-named frame, or a rendered screenshot.",verdicts:{covered:"An executed case proves this dimension.",untested:"No executed case. NOT a pass \u2014 report it as UNTESTED to the user.","not-applicable":"The dimension cannot exist for this export; the ledger carries the written reason."},requiredViewports:[320,375,390,768,1024,1280,1440,1920],containerWidths:[240,320,480,640,960],totals:{exports:304,dimensionCells:4256,covered:94,untested:2335,notApplicable:1827,exportsWithoutFrame:0},dimensions:[{id:"variants",title:"Variants",axis:"visual"},{id:"tones",title:"Tones",axis:"visual"},{id:"sizes",title:"Sizes",axis:"visual"},{id:"shapes",title:"Shapes",axis:"visual"},{id:"density",title:"Spacing / density",axis:"visual"},{id:"ownership",title:"Controlled / uncontrolled / reset",axis:"ownership"},{id:"states",title:"Disabled / read-only / loading / empty / error / success",axis:"state"},{id:"async",title:"Async: loading / reject / retry / cancel / offline",axis:"async"},{id:"responsive",title:"Responsive viewport matrix",axis:"responsive"},{id:"rtl",title:"RTL / direction",axis:"international"},{id:"contentStress",title:"Long / localized content stress",axis:"contentStress"},{id:"keyboard",title:"Keyboard / focus order / focus return",axis:"accessibility"},{id:"accessibleName",title:"Accessible name / description / error association",axis:"accessibility"},{id:"reducedMotion",title:"Preferences: reduced motion / forced colors / 200% zoom / coarse touch",axis:"preferences"}],knownGaps:[{id:"button-contract-gaps",targets:["Button"],dimensions:["states","contentStress","rtl","keyboard","reducedMotion"],cases:["implicit form `type` inside a form","loading combined with asChild","count / overflowCount / showZero overflow","long Japanese and Vietnamese labels","RTL","coarse touch target"]},{id:"card-contract-gaps",targets:["Card"],dimensions:["variants","density","rtl","accessibleName"],cases:["`variant` \xD7 `accent` \xD7 `size` matrix",'`density="tight"` spacing mode',"nested heading levels","RTL accent rail"]},{id:"card-subcomponent-contract-gaps",targets:["CardBar","CardContent","CardFooter","CardHeader"],dimensions:["rtl","accessibleName","contentStress"],cases:["CardBar `extra` slot","CardContent `tight` / `flush` / `solo`","CardFooter `flush` / `separated`","CardHeader `banded`","RTL"]},{id:"empty-state-contract-gaps",targets:["EmptyState"],dimensions:["variants","contentStress","accessibleName"],cases:["`section` variant","`compact` variant","without icon / description / action","heading level (`titleAs` / `titleLevel`) and live-region semantics"]},{id:"progress-contract-gaps",targets:["Progress"],dimensions:["tones","contentStress"],cases:["destructive tone","`over={true}` (value beyond 100%)"]},{id:"carousel-contract-gaps",targets:["Carousel"],dimensions:["ownership","contentStress","keyboard","reducedMotion","rtl"],cases:["single slide","plugins / setApi","autoplay pause","arrow-key traversal alongside tabs","touch / swipe","RTL"]},{id:"data-table-contract-gaps",targets:["DataTable"],dimensions:["states","async","keyboard","accessibleName","density"],cases:["error / prerequisite / background refresh","server and manual modes (manualPagination / manualSorting / manualFiltering)","zero-page and single-page pagination","accessible table and action-column labels","invalid row ids (getRowId)","keyboard behaviour","virtualization"]},{id:"charts-contract-gaps",targets:["LineChart","BarChart","AreaChart","PieChart"],dimensions:["async","reducedMotion","keyboard","contentStress","responsive","rtl"],cases:["loading / error","reduced motion","keyboard datum navigation","invalid / null / NaN data","mobile axis collision","RTL"]},{id:"locale-stress-gaps",targets:["Timeline","PasswordStrength"],dimensions:["contentStress","accessibleName"],cases:["long localized Japanese / Vietnamese content","hard-coded screen-reader strings that never reach `t()`"]}]},F=[{name:"Accordion",group:"data-display",frame:"docs/data-display/accordion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AccordionContent",group:"data-display",frame:"docs/data-display/accordion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AccordionItem",group:"data-display",frame:"docs/data-display/accordion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AccordionTrigger",group:"data-display",frame:"docs/data-display/accordion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AccountChip",group:"layout",frame:"docs/layout/account-chip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Actions",group:"general",frame:"docs/general/actions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","variants"],notApplicable:["density","ownership","shapes","sizes","states","tones"]},{name:"ActionsCopy",group:"general",frame:"docs/general/actions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ActionsFeedback",group:"general",frame:"docs/general/actions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"ActionsItem",group:"general",frame:"docs/general/actions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Activity",group:"general",frame:"docs/general/activity.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes","tones","variants"],notApplicable:["density","ownership","shapes","states"]},{name:"Affix",group:"layout",frame:"docs/layout/affix.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Alert",group:"feedback",frame:"docs/feedback/alert.tsx",covered:["tones","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states"]},{name:"AlertActions",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertContent",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDescription",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialog",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones"]},{name:"AlertDialogAction",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogCancel",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogContent",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogDescription",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogFooter",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogHeader",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"AlertDialogOverlay",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogPortal",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogRoot",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"AlertDialogTitle",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogTrigger",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertMutationFeedback",group:"query",frame:"docs/query/mutation-feedback.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"AlertMutationFeedbackProps",group:"query",frame:"docs/query/mutation-feedback.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertQueryError",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"AlertTitle",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Anchor",group:"navigation",frame:"docs/navigation/anchor.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"AppLauncher",group:"layout",frame:"docs/layout/app-launcher.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AppSettingPicker",group:"navigation",frame:"docs/navigation/app-setting-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AppSettingToggle",group:"navigation",frame:"docs/navigation/app-setting-toggle.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AppShell",group:"layout",frame:"docs/layout/app-shell.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AreaChart",group:"charts",frame:"docs/data-display/charts.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"AspectRatio",group:"layout",frame:"docs/layout/aspect-ratio.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Attachments",group:"data-entry",frame:"docs/data-entry/attachments.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"AuthAccountSummary",group:"layout",frame:"docs/layout/auth-account-summary.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"AuthDivider",group:"layout",frame:"docs/layout/auth-divider.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AuthExpiryProvider",group:"query",frame:"docs/feedback/auth-expiry.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AuthFooter",group:"layout",frame:"docs/layout/auth-footer.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AuthIdentity",group:"layout",frame:"docs/layout/auth-identity.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AuthShell",group:"layout",frame:"docs/layout/auth-shell.tsx",covered:["density","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones"]},{name:"AuthStack",group:"layout",frame:"docs/layout/auth-stack.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Avatar",group:"data-display",frame:"docs/data-display/avatar.tsx",covered:["shapes","sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","states","tones","variants"]},{name:"AvatarFallback",group:"data-display",frame:"docs/data-display/avatar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AvatarImage",group:"data-display",frame:"docs/data-display/avatar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Badge",group:"data-display",frame:"docs/data-display/badge.tsx",covered:["shapes","tones","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","sizes","states"]},{name:"Banner",group:"feedback",frame:"docs/feedback/banner.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"BarChart",group:"charts",frame:"docs/data-display/charts.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"BranchScopePicker",group:"data-entry",frame:"docs/data-entry/branch-scope-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Breadcrumb",group:"layout",frame:"docs/navigation/breadcrumb.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Button",group:"general",frame:"docs/general/button/index.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","tones"]},{name:"ButtonRefetch",group:"query",frame:"docs/query/button-refetch.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","tones"]},{name:"Calendar",group:"data-entry",frame:"docs/data-entry/calendar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Callout",group:"feedback",frame:"docs/feedback/callout.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","tones"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"Card",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:["density","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones"]},{name:"CardAction",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardBar",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardContent",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardCover",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardDescription",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardFooter",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardHeader",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardTitle",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Carousel",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"CarouselContent",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CarouselDots",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CarouselItem",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CarouselNext",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CarouselPrevious",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Cascader",group:"data-entry",frame:"docs/data-entry/cascader.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"CenteredShell",group:"layout",frame:"docs/layout/centered-shell.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ChatBubble",group:"data-display",frame:"docs/data-display/chat-bubble.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes","states","tones","variants"],notApplicable:["density","ownership","shapes"]},{name:"ChatBubbleList",group:"data-display",frame:"docs/data-display/chat-bubble.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ChatComposer",group:"data-entry",frame:"docs/data-entry/chat-composer.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states"],notApplicable:["density","shapes","tones","variants"]},{name:"ChatSuggestion",group:"data-entry",frame:"docs/data-entry/chat-suggestion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"Checkbox",group:"data-entry",frame:"docs/data-entry/checkbox.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CheckboxGroup",group:"data-entry",frame:"docs/data-entry/checkbox.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CodeBlock",group:"data-display",frame:"docs/data-display/code-block.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Collapsible",group:"data-display",frame:"docs/data-display/collapsible.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CollapsibleContent",group:"data-display",frame:"docs/data-display/collapsible.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CollapsibleTrigger",group:"data-display",frame:"docs/data-display/collapsible.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ColorPicker",group:"data-entry",frame:"docs/data-entry/color-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Command",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"CommandEmpty",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CommandGroup",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"CommandInput",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"CommandItem",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CommandList",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CommandPalette",group:"data-entry",frame:"docs/data-entry/command-palette.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CompactBarTrend",group:"charts",frame:"docs/charts/compact-bar-trend.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Conversations",group:"navigation",frame:"docs/navigation/conversations.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CredentialReveal",group:"data-display",frame:"docs/data-display/credential-reveal.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","variants"]},{name:"DataState",group:"query",frame:"docs/query/data-state.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"DataTable",group:"data-display",frame:"docs/data-display/data-table/index.tsx",covered:["density"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["shapes","sizes","tones","variants"]},{name:"DatePicker",group:"data-entry",frame:"docs/data-entry/date-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"DayButton",group:"data-entry",frame:"docs/data-entry/calendar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Descriptions",group:"data-display",frame:"docs/data-display/descriptions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Dialog",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones"]},{name:"DialogAction",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogBody",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogCancel",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogClose",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogContent",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones"]},{name:"DialogDescription",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogFooter",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogHeader",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"DialogOverlay",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogPortal",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogTitle",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogTrigger",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DraggablePanel",group:"layout",frame:"docs/layout/draggable-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"DropdownMenu",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"DropdownMenuCheckboxItem",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"DropdownMenuContent",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuGroup",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuItem",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones"]},{name:"DropdownMenuLabel",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuPortal",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuRadioGroup",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuRadioItem",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"DropdownMenuSeparator",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuShortcut",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuSub",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuSubContent",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuSubTrigger",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"DropdownMenuTrigger",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"EmptyState",group:"data-display",frame:"docs/data-display/empty-state.tsx",covered:["tones","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states"]},{name:"ErrorSurface",group:"layout",frame:"docs/layout/error-surface/index.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"FeatureList",group:"data-display",frame:"docs/data-display/feature-list.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Field",group:"data-entry",frame:"docs/data-entry/checkbox.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"FilterBar",group:"navigation",frame:"docs/navigation/toolbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"FilterBarGroup",group:"navigation",frame:"docs/navigation/toolbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Flex",group:"layout",frame:"docs/layout/flex.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"FloatButton",group:"general",frame:"docs/general/float-button.tsx",covered:["shapes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","sizes","tones","variants"]},{name:"Form",group:"data-entry",frame:"docs/data-entry/form.tsx",covered:["density"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["ownership","shapes","sizes","tones","variants"]},{name:"FormErrors",group:"data-entry",frame:"docs/data-entry/form.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"FormErrorsProvider",group:"data-entry",frame:"docs/data-entry/form.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"FormField",group:"data-entry",frame:"docs/data-entry/form-field/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Heading",group:"general",frame:"docs/general/typography.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","variants"]},{name:"HoverCard",group:"data-display",frame:"docs/data-display/hover-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"HoverCardContent",group:"data-display",frame:"docs/data-display/hover-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"HoverCardTrigger",group:"data-display",frame:"docs/data-display/hover-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Icon",group:"general",frame:"docs/general/icon.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes","tones"],notApplicable:["density","ownership","shapes","states","variants"]},{name:"Image",group:"data-display",frame:"docs/data-display/image.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"ImagePreviewGroup",group:"data-display",frame:"docs/data-display/image.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"InfiniteQueryState",group:"query",frame:"docs/query/infinite-query-state.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Input",group:"data-entry",frame:"docs/data-entry/input.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"InputOTP",group:"data-entry",frame:"docs/data-entry/input-otp.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","variants"],notApplicable:["density","shapes","states","tones"]},{name:"InputOTPGroup",group:"data-entry",frame:"docs/data-entry/input-otp.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"InputOTPSeparator",group:"data-entry",frame:"docs/data-entry/input-otp.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"InputOTPSlot",group:"data-entry",frame:"docs/data-entry/input-otp.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Label",group:"data-entry",frame:"docs/data-entry/label.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"LegalDocumentShell",group:"layout",frame:"docs/layout/legal-document-shell/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Legend",group:"data-display",frame:"docs/data-display/legend.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"LineChart",group:"charts",frame:"docs/data-display/charts.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Link",group:"general",frame:"docs/general/typography.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","tones"],notApplicable:["density","ownership","shapes","variants"]},{name:"ListRow",group:"data-display",frame:"docs/data-display/list-row.tsx",covered:["density"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones","variants"]},{name:"Logo",group:"general",frame:"docs/general/logo.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","variants"]},{name:"Marquee",group:"data-display",frame:"docs/data-display/marquee.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Masonry",group:"layout",frame:"docs/layout/masonry.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"MasterDetail",group:"layout",frame:"docs/layout/master-detail.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"MegaMenu",group:"navigation",frame:"docs/navigation/mega-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","shapes","states","tones","variants"]},{name:"MobileShell",group:"layout",frame:"docs/layout/mobile-shell.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"NavList",group:"layout",frame:"docs/layout/nav-list.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"NumberInput",group:"data-entry",frame:"docs/data-entry/number-input.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"OrgChart",group:"data-display",frame:"docs/data-display/org-chart.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"OrgSwitcher",group:"layout",frame:"docs/layout/org-switcher.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"PageContainer",group:"layout",frame:"docs/layout/page-container.tsx",covered:["density","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones"]},{name:"Pagination",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states"],notApplicable:["density","shapes","tones","variants"]},{name:"PaginationContent",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PaginationEllipsis",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PaginationItem",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PaginationLink",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"PaginationNext",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"PaginationPrevious",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Paragraph",group:"general",frame:"docs/general/typography.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","tones"],notApplicable:["density","ownership","shapes","variants"]},{name:"PasswordInput",group:"data-entry",frame:"docs/data-entry/password-input.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"PasswordStrength",group:"data-entry",frame:"docs/data-entry/password-strength.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"PermissionMatrix",group:"data-display",frame:"docs/data-display/permission-matrix.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"PieChart",group:"charts",frame:"docs/data-display/charts.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Popover",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"PopoverAnchor",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverContent",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverDescription",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverHeader",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverTitle",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverTrigger",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PrefetchLink",group:"react-router",frame:"docs/react-router/prefetch-link.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Progress",group:"data-display",frame:"docs/data-display/progress.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","shapes"],notApplicable:["density","states","variants"]},{name:"Prose",group:"data-display",frame:"docs/data-display/prose.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"QrCode",group:"data-display",frame:"docs/data-display/qr-code.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","states","tones","variants"]},{name:"Radio",group:"data-entry",frame:"docs/data-entry/radio-group.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RadioGroup",group:"data-entry",frame:"docs/data-entry/radio-group.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RadioGroupRoot",group:"data-entry",frame:"docs/data-entry/radio-group.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RadioItem",group:"data-entry",frame:"docs/data-entry/radio-group.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RangeTimeline",group:"data-display",frame:"docs/data-display/timeline.tsx",covered:[],untested:["accessibleName","async","contentStress","density","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones","variants"]},{name:"Rating",group:"data-entry",frame:"docs/data-entry/rating.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RecordPicker",group:"data-entry",frame:"docs/data-entry/record-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","shapes","sizes","states"],notApplicable:["density","tones","variants"]},{name:"ResizableHandle",group:"layout",frame:"docs/layout/resizable-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ResizablePanel",group:"layout",frame:"docs/layout/resizable-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ResizablePanelGroup",group:"layout",frame:"docs/layout/resizable-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ResponsiveGrid",group:"layout",frame:"docs/layout/responsive-grid.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Reveal",group:"general",frame:"docs/general/reveal.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ScrollArea",group:"data-display",frame:"docs/data-display/scroll-area.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ScrollBar",group:"data-display",frame:"docs/data-display/scroll-area.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SearchInput",group:"data-entry",frame:"docs/data-entry/search-input.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones"]},{name:"Segmented",group:"data-entry",frame:"docs/data-entry/segmented.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones","variants"]},{name:"Select",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"SelectContent",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectGroup",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectItem",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"SelectLabel",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectScrollDownButton",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectScrollUpButton",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectSeparator",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectTrigger",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","variants"],notApplicable:["density","ownership","shapes","tones"]},{name:"SelectValue",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Separator",group:"layout",frame:"docs/layout/separator.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","tones"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"ServiceCatalogCta",group:"data-display",frame:"docs/data-display/service-launcher-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ServiceLauncherCard",group:"data-display",frame:"docs/data-display/service-launcher-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ServiceLauncherCardSkeleton",group:"data-display",frame:"docs/data-display/service-launcher-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ServiceRolePanel",group:"layout",frame:"docs/layout/service-role-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Sheet",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"SheetBody",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetClose",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetContent",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetDescription",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetFooter",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetHeader",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"SheetOverlay",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetPortal",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetTitle",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetTrigger",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Sidebar",group:"layout",frame:"docs/layout/sidebar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SidebarHeader",group:"layout",frame:"docs/layout/sidebar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SidebarItem",group:"layout",frame:"docs/layout/sidebar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"SidebarSection",group:"layout",frame:"docs/layout/sidebar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Skeleton",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"SkeletonArticle",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"SkeletonAvatar",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:["shapes","sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","states","tones","variants"]},{name:"SkeletonButton",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:["shapes","sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","states","tones","variants"]},{name:"SkeletonDetail",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonForm",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonImage",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonInput",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"SkeletonNode",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonRows",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonStat",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonTable",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Slider",group:"data-entry",frame:"docs/data-entry/slider.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"SpaceCompact",group:"layout",frame:"docs/layout/space-compact.tsx",covered:[],untested:["accessibleName","async","contentStress","density","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones","variants"]},{name:"SplitPane",group:"layout",frame:"docs/layout/split-pane.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"StatCard",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"StatusBadge",group:"data-display",frame:"docs/data-display/badge.tsx",covered:["shapes","tones","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","sizes","states"]},{name:"Steps",group:"navigation",frame:"docs/navigation/steps.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","states","tones","variants"]},{name:"Swatch",group:"data-display",frame:"docs/data-display/swatch.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Switch",group:"data-entry",frame:"docs/data-entry/switch.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones","variants"]},{name:"Table",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableBody",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableCell",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableHead",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableHeader",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableRow",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","tones"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"Tabs",group:"navigation",frame:"docs/navigation/tabs.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","states","tones"]},{name:"TabsContent",group:"navigation",frame:"docs/navigation/tabs.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"TabsList",group:"navigation",frame:"docs/navigation/tabs.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones"]},{name:"TabsTrigger",group:"navigation",frame:"docs/navigation/tabs.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"TagInput",group:"data-entry",frame:"docs/data-entry/tag-input.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"Text",group:"general",frame:"docs/general/typography.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","variants"]},{name:"Textarea",group:"data-entry",frame:"docs/data-entry/textarea.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"TextDiff",group:"data-display",frame:"docs/data-display/text-diff.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ThoughtChain",group:"data-display",frame:"docs/data-display/thought-chain.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ThoughtChainItem",group:"data-display",frame:"docs/data-display/thought-chain.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","variants"],notApplicable:["density","ownership","shapes","sizes","tones"]},{name:"Thumbnail",group:"data-display",frame:"docs/data-display/thumbnail.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Timeline",group:"data-display",frame:"docs/data-display/timeline.tsx",covered:["density","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones"]},{name:"TimelineGrid",group:"data-display",frame:"docs/data-display/timeline-grid.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TimePicker",group:"data-entry",frame:"docs/data-entry/time-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"TimeRangePicker",group:"data-entry",frame:"docs/data-entry/time-range-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"Title",group:"general",frame:"docs/general/typography.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","tones"],notApplicable:["density","ownership","shapes","sizes","variants"]},{name:"Toaster",group:"feedback",frame:"docs/feedback/toast.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Toggle",group:"data-entry",frame:"docs/data-entry/toggle.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","tones"]},{name:"ToggleGroup",group:"data-entry",frame:"docs/data-entry/toggle-group.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","tones"]},{name:"ToggleGroupItem",group:"data-entry",frame:"docs/data-entry/toggle-group.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","tones"]},{name:"Toolbar",group:"navigation",frame:"docs/navigation/toolbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ToolbarGroup",group:"navigation",frame:"docs/navigation/toolbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Tooltip",group:"feedback",frame:"docs/feedback/tooltip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"TooltipContent",group:"feedback",frame:"docs/feedback/tooltip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TooltipProvider",group:"feedback",frame:"docs/feedback/tooltip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TooltipTrigger",group:"feedback",frame:"docs/feedback/tooltip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Topbar",group:"layout",frame:"docs/layout/topbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TopbarItem",group:"layout",frame:"docs/layout/topbar-item.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Transfer",group:"data-entry",frame:"docs/data-entry/transfer.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Tree",group:"data-display",frame:"docs/data-display/tree.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"TreeSelect",group:"data-entry",frame:"docs/data-entry/tree-select.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"TwoFactorSetup",group:"feedback",frame:"docs/feedback/two-factor-setup.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Typography",group:"general",frame:"docs/general/typography.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Upload",group:"data-entry",frame:"docs/data-entry/upload.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones"]},{name:"UploadCropDialog",group:"data-entry",frame:"docs/data-entry/upload-crop-dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"VisuallyHidden",group:"general",frame:"docs/general/typography.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Welcome",group:"data-display",frame:"docs/data-display/welcome.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","variants"],notApplicable:["density","ownership","shapes","sizes","states","tones"]}],Ce=new Map(F.map(e=>[e.name.toLowerCase(),e]));function M(e){return Ce.get(String(e??"").trim().toLowerCase())}var b=[{number:1,title:"Storybook is mandatory",body:"Every primitive / shell / composite has a paired story under `src/stories/<group>/<Name>.stories.tsx` covering every variant + state on light + dark."},{number:2,title:"Tokens, not utilities",body:"Visual values come from CSS custom properties in `src/tokens/` + `src/styles/theme.css`. Token-named Tailwind utilities (`bg-background`) are fine; raw value utilities (`bg-blue-500`) are forbidden."},{number:3,title:"Radix for interactive primitives",body:"Anything with keyboard / ARIA / portal wraps the relevant Radix primitive."},{number:4,title:"shadcn-style ownership",body:"Primitives are thin wrappers; consumers can fork the source in place."},{number:5,title:"One i18next singleton",body:"`initI18n()` in `src/i18n/index.ts` is THE instance; consumers extend via `addResourceBundle`."},{number:6,title:"WCAG 2.1 AA baseline",body:"Every interactive primitive passes axe-core (keyboard nav, ARIA, focus-visible, 4.5:1 contrast, `prefers-reduced-motion`). Stories double as a11y test surfaces."},{number:7,title:"SemVer 2.0 + Keep a Changelog 1.1",body:"Every release-worthy change updates `CHANGELOG.md` under `## Unreleased` in the same PR."},{number:8,title:"Inclusive naming",body:"`allowlist` / `denylist`, `main` / `primary` / `replica` / `secondary`, `they/them`. Never `whitelist` / `blacklist` / `master` / `slave`. Lint-enforced."},{number:9,title:"No marketing speak",body:'Banned: "powerful", "robust", "blazing fast", "best-in-class", "seamless", "enterprise-grade". State what it does.'},{number:10,title:"English is canonical for docs",body:"Localised docs at `docs/i18n/<bcp47>/`; front-matter tracks staleness."},{number:11,title:"Submodule discipline",body:"Never push a pin to a SHA not on the submodule remote."},{number:12,title:"Branch + PR workflow",body:"`feat/<scope>` / `fix/<scope>` \u2192 submodule `main`. CI green + squash-merge. No direct push to `main`. `--no-verify` forbidden."},{number:13,title:"TypeScript strict",body:"Explicit types on every export. `forwardRef` for components; `ComponentPropsWithoutRef` for extension. No `any`. No `@ts-ignore` without comment + issue link."},{number:14,title:"Every third-party library is shadcn / Radix-recommended",body:"Locked stack: Radix UI, cmdk, sonner, lucide-react, react-aria-components + `@internationalized/date`, i18next + react-i18next, class-variance-authority + clsx + tailwind-merge. New peer \u2192 ADR documenting why it's the canonical choice."},{number:15,title:"No `@apply` re-encoding tokens",body:"Inside a primitive `.tsx`, don't `@apply` a Tailwind utility that re-encodes a token \u2014 reference the canonical CSS class from `tokens.css` instead. Composite token-named utilities remain fine."},{number:16,title:"CSS source-of-truth is `src/tokens/` + `src/styles/theme.css`",body:"A primitive that needs a new color / spacing / radius adds it there FIRST, then references it."},{number:17,title:"`src/stories/` \u2194 `src/components/` parity",body:"Story set matches primitive set under each group. CI-checked via `scripts/check-stories-parity.mjs`."},{number:18,title:"`docs/reference/<group>/` \u2194 `src/components/<group>/` parity",body:"Every primitive has a reference page; every page maps to a primitive. CI-checked via `scripts/check-docs-parity.mjs`."},{number:19,title:"No service-specific anything",body:'`me-service`, `forge-service`, `admin-service` never appear in source / comments / prop names. Per-deployment brand color lives at `[data-accent="<palette>"]`.'},{number:20,title:'No "platform-only" exports',body:"Every primitive ships via `package.json::exports`. Internal-only helpers stay un-exported."},{number:21,title:"Every component honours every theme axis",body:"`data-theme` (light / dark), `data-accent` (6 palettes), `data-density` (compact / default / comfortable), `data-font-size` (sm / base / lg / xl). Read from tokens, never hardcode values."},{number:22,title:"100% match to the design canon",body:'Every visual literal comes from `design-handoff/ui-system/<latest-bundle>/`. Token-pin canon literals; never substitute "close enough". If the bundle doesn\'t cover a case \u2014 STOP, ask the user to mock it.'},{number:23,title:"Concept-first prop API",body:"One concept per prop. Reuse shared vocabulary (`size`, `variant`, `color`, `tone`, `accent`, `padding`, `density`, `orientation`, `placement`, `current`, `value` / `defaultValue` / `onValueChange`, `open` / `defaultOpen` / `onOpenChange`, `justify`, `sticky`, `offset`). Before adding a new prop or token: grep for an existing one."},{number:24,title:"Mobile-first",body:"Defaults target `xs` (\u22650px); progressive enhancement via `sm:` / `md:` / `lg:` / `xl:` / `2xl:`. Touch targets \u2265 44 \xD7 44 px (`--touch-target-min`, does NOT scale with density). Runtime viewport via `useBreakpoint`, never `window.innerWidth`. Stories render at narrow viewport first."},{number:25,title:"Stories are docs; UI is the primitive",body:"When a story looks wrong, fix the primitive / CSS / token. Never paper over with a story tweak. Story-only diff without a paired primitive / CSS / token diff is rejected."},{number:26,title:"Library isolation",body:"`dist/` ships only the consumer surface. Storybook, tests, scripts, design-handoff, `dev-probe/` stay out of npm. Every `dependencies` entry is `external` in `tsup`. Verification via `pnpm pack` + grep of `dist/`."},{number:27,title:"Per-group folder structure",body:"Primitives at `src/components/<group>/<Name>.tsx`; six canonical groups (general, layout, data-display, data-entry, feedback, navigation). Barrel = `src/components/primitives.ts` (single file). Stories + reference docs mirror the same group hierarchy."},{number:28,title:"`src/` folder taxonomy",body:"Three classes: consumer surface (matched by `tsup` entry + `package.json::exports`), Storybook-only (`src/stories/`), build-input-only (`cn.ts`, per-group sources consumed via the barrel). No `src/lib/`, `src/utils/`, `src/internal/`, `src/clients/`, `src/screens/`. Service clients live with the composite that uses them."},{number:29,title:"Stories consume framework primitives only",body:"No raw `<button>` / `<input>` / hand-rolled chips when a primitive exists. HTML semantics (`<section>`, `<article>`, \u2026) for structure are fine. Inline `style={{}}` limited to layout / positioning; no colour / radius / typography overrides."},{number:30,title:"Story `render` returns JSX directly",body:"No opaque `<XyzDemo />` wrapper components, no zero-arg `Demo` helpers. Use `render: function StoryName() { \u2026 }` so Storybook's source panel shows runnable JSX, not `<XyzDemo />`."},{number:31,title:"No nested wrapper / convenience primitives",body:"One Radix base = one framework primitive. `<SimpleX>` over `<X>` is forbidden; add a prop to `<X>` instead. Composites under `src/components/composites/` that combine multiple primitives are NOT wrappers."},{number:32,title:"No redundant props",body:"Before adding a prop / item field / variant, grep the existing surface; if a field already covers the concept, use it. Top-level prop that re-expresses an item field (Timeline `pending` \u2194 `items[i].animate`) is rejected."},{number:33,title:"Stories / source / docs name-synchronized",body:"No two names for the same export across the framework surface; no legacy aliases in stories / docs (source may keep an alias for a deprecation cycle, but the marketing surfaces use the canonical name only)."},{number:34,title:"Storybook source panel = real, copy-paste-ready code",body:'Storybook\'s react-docgen serializer strips every function value (`cell: ({row}) => <JSX/>`, `render: ({field}) => <Input/>`, `rowClassName`, `renderItem`, \u2026) to `() => {}`. Any story whose `render` passes a function-valued prop, references a module-level helper (`Badge`, `EMPLOYEE_COLUMNS`, etc.), or uses a render-prop pattern MUST override `parameters.docs.source.code` with the literal copy-paste-ready snippet \u2014 type aliases, helper functions spelled out, column definitions with cell JSX visible, inline data array. The `render()` callback stays as-is (module-level constants are fine for runtime performance); `source.code` is the marketing surface. Skip ONLY for stories whose JSX is purely static primitives Storybook can serialize verbatim (`<Button variant="primary">Click</Button>`).'},{number:35,title:"Status chips never wrap",body:"A `Badge` / `Badge` reads as one atomic unit. Its label must never break across lines \u2014 pin `white-space: nowrap` on the chip (done in `badge-layout.css`), especially inside narrow `DataTable` cells (\u30B9\u30B3\u30FC\u30D7 / \u30B9\u30C6\u30FC\u30BF\u30B9 columns). If a cell is too tight, widen the column or shorten the label; never let the chip wrap."},{number:36,title:"Badge tone/icon are the colour escape hatch",body:"For ANY other value \u2014 localized labels (\u516C\u958B\u4E2D, \u30A2\u30AF\u30C6\u30A3\u30D6) or categorical tiers (\u4F1A\u54E1\u30E9\u30F3\u30AF, \u5951\u7D04\u30D7\u30E9\u30F3) \u2014 pass `tone` explicitly (success | warning | destructive | info | neutral) and, for non-lifecycle tiers, `icon={null}` to drop the misleading glyph. Don't let domain labels fall back to neutral grey + \u25CB. Map domain\u2192tone in the CONSUMER layer; the framework only provides the props."},{number:37,title:"DataTable is full-width \u2014 never inside a narrow grid column",body:"A multi-column `DataTable` occupies its OWN row at the page's full width: `<Card><CardContent flush><DataTable \u2026/></CardContent></Card>`. Never nest it in a `lg:col-span-2` of a `ResponsiveGrid columns={3}` beside a chart \u2014 the columns get squeezed until CJK text collapses to one character per line. Charts / KPI cards go in their own row ABOVE the table. (See the `inertia-list-page` pattern.)"},{number:38,title:"FilterBar stays OUT of CardContent flush",body:"`CardContent flush` strips horizontal padding for edge-to-edge tables. A `FilterBar` placed inside it loses all padding and sticks to the card edge. Render `FilterBar` as a STANDALONE block above the table card; wrap ONLY the `DataTable` / `EmptyState` in the `Card` + `CardContent flush`. Order on a list page: KPIs \u2192 FilterBar \u2192 table card."},{number:39,title:"Long text columns get an explicit width",body:"For columns whose value can be long (name / title / segment / address), set `col.width` to a Tailwind width class (e.g. `w-64`, `w-48`) so the column reserves space instead of shrinking and wrapping to many lines; leave numeric / status columns auto. Table cells default to `white-space: nowrap`, so an over-tight table scrolls horizontally rather than crushing \u2014 give the important columns real widths so the default layout reads well before any scroll."},{number:40,title:"Pages are mobile-first",body:'Author and verify every page at 320\u2013390px FIRST. Page sections are spaced by `PageContainer` itself (`--page-body-gap` between its direct children). Inside a section spacing comes only from `Flex` `gap` (vertical rhythm = `Flex direction="col"`, control rows = the default `direction="row"`) + `ResponsiveGrid columns={2|3|4}` (which collapse to a single column on narrow screens) \u2014 never raw `p-*` / `gap-*` / `space-*` utilities for page layout (the static audit rejects them). Styles are loaded whole: `@godxjp/ui/styles` or `styles/core`, never a hand-picked set of layers. They differ ONLY in the 729 bundled CJK `@font-face` declarations, and that difference is most of the CSS: 367 KB vs 86 KB gzip for a 15-component app (gh#971) \u2014 pick `styles/core` whenever the app loads fonts another way.'},{number:41,title:"Drawer & dialog footer layout",body:'Sheet/Dialog/AlertDialog footers are a pinned action bar (the Drawer footer convention): the footer sticks to the bottom, SheetFooter draws a full-bleed top border, and actions are RIGHT-aligned with the PRIMARY button rightmost (Cancel/secondary to its left). A destructive / clear / reset action goes far-LEFT \u2014 give that button `className="me-auto"` \u2014 the logical edge, so the action stays on the reading-start side under RTL too. NEVER stack footer buttons full-width or center them.'},{number:42,title:"Props & Tokens Before Customization",body:"Before reaching for a Tailwind class, inline `style`, or extra CSS, you MUST first check whether the component already supports the need via a PROP, a design TOKEN, or a layout/typography PRIMITIVE. godx-ui is meant to be enough on its own: `className` is for genuine one-offs only \u2014 never to redo what an API already does. Specifically: (1) NEVER hand-roll typography \u2014 no `text-[13px]`/`text-[11px]` arbitrary px (bypasses the golden type scale), no `font-medium`/`font-semibold`/`text-muted-foreground` on a raw `<span>`; use `<Text size tone weight tabular mono>` / `<Heading level>`. (2) NEVER hand-roll a trivial flex/grid wrapper; use `<Flex>` / `<ResponsiveGrid>` / `<PageContainer>`. (3) NEVER set a control's radius/height/colour with a utility when a `shape`/`size`/`tone`/token exists."},{number:43,title:"Every form control goes through FormField",body:"Consumers MUST wrap every labelled form control (Input, Select, DatePicker, NumberInput, Radio.Group, Checkbox groups, range pairs, ...) in FormField \u2014 it owns the label (aria-labelledby, never a dangling <label for>), auto-generates/injects the control id, and wires aria-describedby/aria-errormessage/aria-invalid. Bare controls are the rare exception (e.g. a toolbar quick-filter with its own aria-label) and must carry id/name + aria-label themselves. Never hand-roll a label+control stack with Text/Label."},{number:44,title:"Chrome is a token, default quiet",body:"Any decorative chrome a component draws \u2014 dividers, separator borders, and the padding that exists only to space that chrome \u2014 MUST read a token; never hard-code it in `src/styles/*.css` (a hard-coded `border-bottom: 1px solid hsl(var(--border))` leaves consumers no off-switch short of a variant fork). The DEFAULT is the quietest state (`none` / balanced rhythm); a service theme opts IN, e.g. `--page-header-divider: 1px solid hsl(var(--border))`."},{number:45,title:"Every service-tunable constant gets a knob",body:'When component CSS encodes a geometry choice that a service plausibly re-tunes to match its design handoff \u2014 form label column width, label\u2194control gap, header insets \u2014 it MUST be a documented component token (current value as the default). The theme sets it ONCE globally; props (`labelWidth`) override per instance; Form\u2192FormField priority stays intact. The test: "would a service theme.css want to change this to match its design grid?" If yes and the only route is forking CSS, that is a library gap \u2014 fix the library, don\'t patch the app.'},{number:46,title:"Typography is tokens, default is base",body:"The DEFAULT body size is `--font-size-base`; components render body/UI text at `base`, not at the `sm` alias. Smaller-by-design text (badge, section label, caption) is a component token defaulting to a small step (`--badge-font-size: var(--font-size-xs)`), so a service re-tunes that part without moving the global scale. The `sm`/`xs` tokens stay for the explicit `<Text size>` API. Every component token is surfaced in the MCP `get_component` output (check:mcp-token-sync)."},{number:47,title:"The layer contract \u2014 cascade layers, not specificity",body:'Every rule this package ships is inside a cascade layer, and layer order beats specificity outright. Two consequences. (1) INSIDE the package: `@layer components` is EARLIER than Tailwind\'s `utilities`, so a utility a component emits on its own element (`<table class="text-sm">`) silently outranks the component rule meant to own that property \u2014 no selector can win. A responsive re-point that must beat such a utility goes in `@layer godxjp-ui-responsive`, declared after Tailwind in `styles/base.css` and therefore LAST; it is reserved for `@container`/`@media` re-points, never static rules.'},{number:48,title:"Two token value forms \u2014 read the call site before you set a colour",body:"A colour token holds EITHER bare HSL components (`--card: 60 33% 99%`, read as `hsl(var(--card))`) OR a complete CSS colour (`--card-tint: hsl(var(--primary) / 4%)`, read as `var(--card-tint)`). The NAME does not tell you which, and neither does the tier: `--menu-item-hover-background` / `--tree-node-hover-background` / `--table-row-hover-background` take a complete colour while `--segmented-item-hover-background` / `--topbar-item-hover-background` take components \u2014 five knobs for the same hover fill, all defaulting to `--accent`. Measured: 346 published tokens hold a colour, 96 components / 249 complete, and 3 say which. SET THE WRONG FORM AND NOTHING SAYS SO: the declaration is invalid at computed-value time, the property takes its own INITIAL value (`transparent` for a background) and the call-site fallback is NOT used \u2014 so the surface shows what is behind it and reads exactly like a knob that does not work (a table header measured 1.03:1 this way). The tell in DevTools: the custom property holds what you wrote and the painted property is `rgba(0, 0, 0, 0)`. To check a knob: `grep -rho 'hsl(var(--NAME\\|var(--NAME' node_modules/@godxjp/ui/dist` \u2014 `hsl(var(--NAME` means components, bare `var(--NAME` means complete. Grep `dist` whole: some knobs are read from a component's JS, not its CSS. SUB-TRAP: a components role may carry an alpha (`--card: 0 0% 100% / 42%` is how a glass theme works) but 83 declarations across 15 roles apply their OWN alpha (`hsl(var(--accent) / 0.7)`), and a second `/` is a parse error \u2192 transparent. `--primary`, `--muted`, `--destructive`, `--warning`, `--success`, `--info`, `--accent`, `--foreground`, `--muted-foreground`, `--table-row-tone-color`, `--background`, `--destructive-foreground`, `--secondary`, `--accent-foreground`, `--ring` all have at least one such reader; `--card` and `--popover` have none. docs/CUSTOMER-THEMING.md \"Building a COMPLEX theme\" \xA71."},{number:49,title:"Interaction states are 95 separate tokens \u2014 resting state is not one of them",body:'Hover, active, selected, checked, pressed and focus are their own tokens: 95 published (`node -e "const t=require(\'./node_modules/@godxjp/ui/agent/tokens.json\'); console.log(t.filter(x => /-(hover|active|selected|checked|pressed|focus)(-|$)/.test(x.name)).length)"`), 62 of which paint a colour, an edge or an elevation. A theme that re-materialises a surface and sets only its RESTING fill ships every other state broken, and each defect is reported from a screenshot rather than by a gate: a sidebar row at dark-violet-on-violet (`--sidebar-item-active-foreground` defaults to the live `--primary-active`, src/styles/shell-layout.css:2289-2291), a Segmented hover with a dark fill under dark text (`--segmented-item-hover-background` set without `--segmented-item-hover-color`), a Topbar hover block. `--focus-ring-color` is on that list and a ring that fails 3:1 on its new ground is a WCAG 2.2 SC 1.4.11 defect, not a polish item. THE METHOD: for every component you re-theme, list its tokens (`get_component`, or `grep -- "--<component>-" node_modules/@godxjp/ui/dist/tokens/components/`) and set the state rows at the same time as the resting row. A state knob left at its default resolves against the LIVE role at the painting element \u2014 the correct default, and exactly why it can be wrong for you once `--accent` is no longer pale.'},{number:50,title:"A scoped theme must state its own `color`",body:"`src/styles/base.css:261` sets `color: hsl(var(--foreground))` on `body`, which is above every scope a consumer can make, so that `var()` substitutes against the ROOT's `--foreground` exactly once and every element below inherits the already-resolved colour. A plain `<div>` carrying a theme's tokens therefore retints every SURFACE and no TEXT: measured, a title whose own computed `--foreground` was the theme's near-white still painted `rgb(36, 35, 30)`, 1.34:1 on real pixels, with every element reporting it was inside the scope (gh#881). It is the \xA73 freeze rule applied to a PROPERTY instead of a token, and worse there \u2014 a token can be given a knob and `color` on `body` cannot. FIX, React: wrap the region in `ThemeScope` (`@godxjp/ui/app`), which re-states `color` on its own element (src/lib/overlay-portal.tsx:270, `display: contents` so the box goes and the inheritance stays) AND on the body-level host it creates for portalled overlays (:203) \u2014 the other half, since a Dialog portals to `document.body` and would otherwise wear the root's theme. FIX, stylesheet-only scope: declare `color: hsl(var(--foreground))` on your own selector alongside the tokens; that is your element, not a selector into this package, so cardinal rule \"a consumer sets tokens, never selectors\" permits it \u2014 but it does NOT reach portalled overlays. docs/TOKEN-RESOLUTION.md \xA75 rule 7."}];function A(e){return b.find(t=>t.number===e)}var v=[{name:"common-fixes",tagline:"Fix the most common @godxjp/ui consumer mistakes & visual bugs (StatCard double-border, grey Badge, crushed/empty table headers, washed-out sidebar footer, Inertia layout crash, SSR hydration). Before \u2192 after.",tags:["fixes","migration","bug","cardstat","statusbadge","datatable","sidebar","gotcha","review"],code:`// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+tokenizeText("\u6771\u4EAC\u90FD", "auto", "ja"); // ["\u6771", "\u4EAC", "\u90FD"]`}];function K(e){let t=e.trim().toLowerCase();return x.find(a=>a.name.toLowerCase()===t)}function _(e){return x.filter(t=>t.kind===e)}function Y(e){let t=e.trim().toLowerCase();return t===""?x:x.filter(a=>a.name.toLowerCase().includes(t)||a.tagline.toLowerCase().includes(t)||a.kind.includes(t)||a.subpaths.some(o=>o.includes(t)))}var C=[{name:"--wa-*",category:"primitive",tier:"primitive",role:"Neutral decorative Japanese accent primitives for charts/tags/decoration only."},{name:"--chart-1..6",category:"primitive",tier:"primitive",role:"Neutral decorative chart series palette. The @godxjp/ui/charts components (LineChart/BarChart/AreaChart/PieChart) read these by series index automatically \u2014 a service rethemes every chart at once by overriding --chart-1..6; per-series/per-slice overrides go through the component's series.color / colors props."},{name:"--space-0..12 / --space-20 / --space-24",category:"primitive",tier:"primitive",role:"Raw spacing scale, on the 4px grid and multiplied by --scaling. 0/4/8/12/16/20/24/32/40/48px, then the DISPLAY end: --space-20 (80px) and --space-24 (96px), named `n = px / 4` like every step below them. The scale used to stop at 48px, which is the ceiling of an admin screen and the floor of a marketing section, so website authors typed `padding-block: 5rem` instead. The two display steps are Carbon $spacing-11 and $spacing-12 exactly \u2014 docs/DESIGN-AUTHORITY.md makes Carbon the authority for spacing and carbon-scale-alignment.test.ts enforces it, so the scale grows TOWARD its authority. They are NOT generated from the golden ratio: the \u03C6 ladder (--phi-n2..--phi-p2) is an optional modular-SIZE utility, and semantic/layout.css has said since it was written that the spacing grid is linear because mixing the two left an incoherent density rhythm. Every --scaling-derived step is re-declared in styles/density.css and in `.ui-scale-fixed`; a new one that is not would FREEZE at :root."},{name:"--icon-size-{2xs,xs,sm,md,lg,xl,2xl,3xl,4xl}",category:"primitive",tier:"primitive",role:'Raw ICON scale \u2014 10 / 12 / 14 / 16 (md, the default) / 20 / 24 / 36 / 40 / 48 px. Icon was the last geometric axis with no scale: 28 component tokens declared raw numbers and between them used only these nine values, so this NAMES an existing vocabulary rather than inventing one. It is a FIXED LIST, not a `base * ratio^n` scale like --font-size-*, and deliberately so: 14/16 = 0.875 but 20/16 = 1.25, no single ratio generates the steps. Type can sit between pixels because hinting and antialiasing carry it; a 1px-stroke glyph cannot, so every step lands on a whole pixel at a 16px root. NOT --scaling-multiplied here: density is opted into by the tokens that want it (`calc(var(--icon-size-md) * var(--scaling))`, as --control-icon-size does), which keeps the scale itself the crisp whole-pixel list. TIER 1 vs TIER 2 \u2014 a value used in MORE THAN ONE place belongs on the scale and a service retunes it once; a value used in exactly ONE place (a 6px status dot) does NOT, and is set at the call site on that component\'s own --*-icon-size / --*-glyph-size token (`style={{ "--menu-icon-size": "6px" }}` or a `[data-\u2026]`-scoped theme rule). An inline custom property wins by inheritance proximity, so tier 2 never needs !important, a :root override, or a fork.'},{name:"--stroke-{hairline,sm,md,lg,xl,2xl}",category:"primitive",tier:"primitive",role:"Raw STROKE scale \u2014 the thickness of a painted LINE: 1 (hairline) / 1.5 / 2 (md, the emphasis stroke) / 3 / 4 / 6 px. The census called `width` the worst axis in the system at 91% raw; the census was right and the diagnosis was not, because `-width` is THREE concerns wearing one suffix \u2014 the thickness of a drawn line, the measure of a container (a dialog, a reading column, an auth card) and the content width of a field (how wide a picker must be to hold its longest label). Only the first is a vocabulary, and it repeats hard: six values across ~20 tokens spanning borders, focus rings, accent rails, selected-state markers and presence strokes. The other two are tier 2 by nature \u2014 their values appear in exactly one place \u2014 and are deliberately NOT on a scale. PX, NEVER REM: a stroke is a device line whose job is to read as one crisp rule at any type size, so it must not grow with the root font-size (`--slider-track-height: 0.375rem` is a different decision and stays put). NOT --scaling-multiplied: --scaling is a DENSITY knob, and a 1px divider at 0.92px would blur rather than tighten. --focus-ring-width is a member of this scale (`var(--stroke-md)`), so retuning line weight retunes the rings with it. --stroke-hairline sits BELOW --stroke-sm rather than being called xs because 1px is not really a step: it is the device hairline, the one thickness a service retunes the EXISTENCE of rather than the value (cardinal rule #44)."},{name:"--band-height-{xs,sm,md,lg,xl,2xl,3xl}",category:"primitive",tier:"primitive",role:"Raw BAND-HEIGHT scale \u2014 the vertical extent of a horizontal strip that content is centred in: 24 / 28 / 32 (md, the default control and row band) / 36 / 44 (the WCAG 2.2 AA touch floor, rule #24) / 48 / 56 px. `height` split the same way `width` did: a control, a table row, a menu item, a sidebar nav row and the app-shell top bar are ONE decision sharing seven values, each declared by two to five tokens, while a chart plot's height, a transfer pane's min-height and a popover's max-height are container measures chosen per surface with almost no repeated value and stay literal. The case for this is that `PageContainer`'s chrome band had no height token while `AppShell`'s bar did, so nothing could be aligned to it \u2014 the axis had no name. NOT A SUBSTITUTE FOR --control-height-*: the control tier is a RUNTIME LADDER (it multiplies by --scaling, steps \xB1--space-1 for sm/lg/xs, and `@media (pointer: coarse)` lifts the whole thing to the 44px tap floor); this scale is the STATIC vocabulary the ladder is ANCHORED on (`--control-height-default: var(--band-height-md)`), exactly as --font-size-base anchors the type scale. Point a band token at --control-height-* to \"reuse a step\" and you silently enrol it in density AND in the coarse-pointer growth \u2014 that is a geometry change, not a rename, and it is why --table-row-height-default reads var(--band-height-md) instead. NOT --scaling-multiplied here: whether a band breathes with density is a per-token decision (--control-height opts in, --app-shell-bar-height deliberately does not)."},{name:"--*-background / --*-color / --*-foreground / --*-tint \u2014 TWO VALUE FORMS",category:"semantic",tier:"semantic",role:"READ THIS BEFORE SETTING ANY COLOUR. A colour token holds EITHER bare HSL components (`--card: 60 33% 99%`, read at the call site as `hsl(var(--card))`) OR a complete CSS colour (`--card-tint: hsl(var(--primary) / 4%)`, read as `var(--card-tint)`). The name is not a signal and neither is the tier \u2014 `--menu-item-hover-background`, `--tree-node-hover-background` and `--table-row-hover-background` take a complete colour while `--segmented-item-hover-background` and `--topbar-item-hover-background` take components, five knobs for the same hover fill all defaulting to `--accent`; `--card-background` is components while `--card-tint`, three lines above it in the same rule, is a complete colour. Measured: 346 published tokens hold a colour \u2014 96 components, 249 complete \u2014 and 3 of them say so. THE WRONG FORM FAILS SILENTLY AND DOES NOT FALL BACK: the substituted declaration is invalid at computed-value time, so the property takes its own INITIAL value (`transparent` for a background) rather than the call-site fallback, and the surface shows whatever is behind it. Measured in Chromium: `var(--k, hsl(120 50% 50%))` with `--k: 0 100% 50%` computes `rgba(0, 0, 0, 0)`, and `hsl(var(--k, 120 50% 50%))` with `--k: rgb(255 0 0)` computes `rgba(0, 0, 0, 0)`. The DevTools tell: the custom property holds exactly what you wrote and the painted property is `rgba(0, 0, 0, 0)`. TO CHECK ONE KNOB, read its call site: `grep -rho 'hsl(var(--NAME\\|var(--NAME' node_modules/@godxjp/ui/dist` \u2014 `hsl(var(--NAME` is components, a bare `var(--NAME` is a complete colour. Grep `dist` whole, not just `dist/styles`: a few knobs (`--toast-background`) are read from a component's JS. SUB-TRAP: a components role may legally carry an alpha (`--card: 0 0% 100% / 42%`) but 83 declarations across 15 roles apply their own (`hsl(var(--accent) / 0.7)`), where a second `/` is a parse error \u2192 transparent. `--card` and `--popover` have no such reader; `--primary` (18 sites) and `--muted` (15) have the most. Cardinal rule 48. The rest of the complex-theme checklist: rule 49 (95 interaction-state tokens), rule 50 (a scoped theme must state its own `color`), docs/CUSTOMER-THEMING.md \"Building a COMPLEX theme\", docs/TOKEN-RESOLUTION.md \xA73 and \xA75."},{name:"--overlay-z-index",category:"semantic",tier:"semantic",role:"The ONE stacking layer every portaled overlay sits on \u2014 Tooltip, Popover, Select, DropdownMenu, Sheet (overlay AND panel), and since #319 also Dialog, AlertDialog and the CommandPalette, scrim and content alike. Each of those used to hard-code `z-50` independently, so an app that mounts the library under its own stacking context (a sticky masthead, a third-party chat widget) had to fight a separate literal per primitive \u2014 and whichever one it missed rendered underneath. Stacking is a SYSTEM decision, not a per-primitive one: raise every overlay together by overriding this once. Default 50, byte-identical to the literals it replaced. The DataTable sticky header deliberately stays BELOW it, so a menu opened from a sticky column header still wins. NOTE: overlays render into a portal on document.body, so a scoped `[data-tenant]` / `.dark` override must also sit on the portal container to reach them."},{name:"--font-size-*",category:"primitive",tier:"primitive",role:"Raw typography scale. `--font-size-display` is the BASE KNOB of the display ramp (`3xl`/`4xl`/`5xl` derive from it), so one declaration moves a marketing hero AND the two steps under it \u2014 never restate `--font-size-5xl`. It takes any length expression, so a FLUID hero is `--font-size-display: clamp(2.125rem, 4vw, 3.5rem)`; pinned at a single rem it paints the desktop size on a phone (measured: 56px at a 390 viewport where the brand scale said 34px). Pair with `--font-family-display`, and for a CJK product do NOT put a Latin-only face first in that stack \u2014 the browser falls through per glyph so it LOOKS fine, while the Latin inside a Japanese headline silently renders in a different face than the headline. Keep the CJK face as the display family and opt into the Latin face per element (eyebrow, price, code)."},{name:"--font-sans-base",category:"semantic",tier:"semantic",role:`The default sans face. FONT-AGNOSTIC by default (pure system stack) \u2014 the library ships no hardcoded brand font. Override this for one face everywhere. --font-family-sans defaults to it; --font-family-display / --font-family-body default to --font-family-sans (override those for a dual display+body brand). Consumers supply the actual @font-face (next/font, @fontsource, self-host); the opt-in @godxjp/ui/styles/fonts OVERWRITES this (and --font-sans-vi) with the bundled DXS stack \u2014 "Noto Sans JP" primary (incl. the Vietnamese coverage) with "M PLUS 2" as the fallback. Directly after "Noto Sans JP" the bundled stack names "Noto Sans JP Fallback" \u2014 LOCAL faces (Arial / Liberation Sans for Latin, Hiragino / Yu Gothic / Meiryo / Noto Sans CJK JP / IPAGothic for Japanese) metric-overridden to Noto Sans JP, so the cold-visit swap from fallback to brand face does not reflow the page (issue #475); if you restate the stack with the bundled faces, keep that name second. BUNDLE CHANGED IN v18.12.20 (product override, direct instruction): v16 bundled Noto Sans JP + Montserrat, v18.12.0\u201318.12.19 bundled M PLUS 2 + Noto Sans JP, v18.12.20+ bundles Noto Sans JP + M PLUS 2 \u2014 if a design spec names an earlier bundle's faces, set the tokens explicitly instead of relying on the bundle. IMPORT ORDER IS LOAD-BEARING: styles/fonts must be imported AFTER styles/base, because foundation.css declares this system-stack default on :root at the same specificity (0,1,0) and the later declaration wins (the all-in-one @godxjp/ui/styles entry already orders it correctly \u2014 issue #210).`},{name:"--font-sans-{ja,ko,vi,zh-hans,zh-hant}",category:"semantic",tier:"semantic",role:'Per-language font SLOT tokens. styles/base.css wires each [lang] to read its slot with --font-sans-base as fallback, so a consumer switches a locale\'s face by setting e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base)` \u2014 NO [lang] selectors to write. Empty by default. zh-hans matches lang zh|zh-Hans|zh-CN; zh-hant matches zh-Hant|zh-TW. Deciding which @font-face ships on which locale route is the consumer\'s font pipeline, not the library. The opt-in @godxjp/ui/styles/fonts only fills --font-sans-vi (with the bundled "Noto Sans JP", "M PLUS 2" stack); the other slots stay empty and fall back to --font-sans-base.'},{name:"--duration-{fast,base,slow}",category:"primitive",tier:"primitive",role:"Motion durations (150 / 250 / 500ms). Read these instead of a literal `0.5s` for enter/transition timing (rule #2). the reference design keeps motion short; honour `prefers-reduced-motion` at the call site. RE-THEMING: a brand that ships its own timing TABLE (press/hover/state/enter/hero-once) does not need a fork or new CSS \u2014 redeclare these three plus the four `--ease-*` and the two `--reveal-*` in its theme scope, and `Reveal`, Card `hoverable`, Dialog/Sheet enter and every token-driven transition retune themselves. A whole brand motion spec has been reproduced in EIGHT declarations; see the `brand-theme-block` pattern."},{name:"--ease-{standard,emphasized,decelerate,accelerate}",category:"primitive",tier:"primitive",role:"Motion easing curves. `standard` for most transitions, `emphasized` for entrances/overlays (the vaul drawer curve), `decelerate` for settling in, `accelerate` for exits. Read instead of a literal `cubic-bezier(\u2026)`."},{name:"--reveal-distance",category:"primitive",tier:"primitive",role:'Distance (10px) a revealed element travels on enter (translateY/-X). Read instead of a literal `translateY(10px)` for staggered reveals. A brand whose spec reads "hero once 480ms, 0\u21921, y8\u21920" sets `--duration-slow: 480ms` and `--reveal-distance: 8px` \u2014 the spec becomes two declarations.'},{name:"--reveal-stagger-step",category:"primitive",tier:"primitive",role:"One step (60ms) of the Reveal stagger ladder \u2014 `<Reveal delay={n}>` waits n \xD7 this before entering, so a column of reveals cascades. Read instead of a literal `.04s`/`.09s` per-item delay."},{name:"--duration-loop",category:"primitive",tier:"primitive",role:"The AMBIENT/LOOPING interval (1400ms) \u2014 the cycle member of the motion tier. `--duration-{fast,base,slow}` time a TRANSITION (A to B, then stop); a loop needs an interval, so every ambient affordance in the product breathes at one rate. `Activity` reads it through `--activity-interval`."},{name:"--activity-interval",category:"component",tier:"component",role:"Per-component override of the ambient loop interval (defaults to `var(--duration-loop)`). A service tunes its typing/sync rhythm without moving every loop in the product (cardinal rule #45). Declared in the MOTION tier (tokens/foundation.css) beside `--reveal-stagger-step`, not in tokens/components/activity.css, because component-token names must carry a geometry/colour property word and there is none for a duration."},{name:"--activity-stagger-step",category:"component",tier:"component",role:"Offset (160ms) between the three `Activity variant='dots'` marks \u2014 the LOOP counterpart to `--reveal-stagger-step`, named to match. In RTL the dots reverse with the flex row, so the cascade follows the reading direction with no extra rule. Declared in the motion tier for the same reason as `--activity-interval`."},{name:"--activity-mark-size",category:"component",tier:"component",role:"Diameter (0.25em) of one `dots` mark. `em`-based so the whole mark tracks `--activity-font-size-*` (and therefore `--font-size-base` and the density axis) instead of pinning a px per size step."},{name:"--activity-mark-offset",category:"component",tier:"component",role:"Travel (0.25em) of one `dots` step \u2014 the LOOP counterpart to `--reveal-distance`, named to match. It is ALSO the height the mark row reserves, so a dot at the top of its arc is never clipped and the row never grows mid-cycle."},{name:"--activity-mark-rest-alpha",category:"component",tier:"component",role:"Opacity (0.35) of a mark at the trough of its cycle. Deliberately never 0: a mark that vanishes reads as a rendering bug, and it is what makes the `prefers-reduced-motion` frame (animation dropped) land on a legible resting state."},{name:"--activity-pulse-mark-size",category:"component",tier:"component",role:"Diameter (0.5em) of the single `variant='pulse'` mark \u2014 bigger than one `dots` dot because it carries the whole affordance alone."},{name:"--activity-gap",category:"component",tier:"component",role:"Mark-to-mark and mark-to-label gap (defaults to `var(--space-1)`)."},{name:"--activity-font-size-{xs,sm,md,lg}",category:"component",tier:"component",role:"Root size ladder for `Activity`. The mark is em-based, so this ONE value scales the whole indicator; the steps mirror the `Text` size the label renders at, so mark and label stay optically paired."},{name:"--activity-bar-{width,height,radius,segment-width,track-alpha}",category:"component",tier:"component",role:"The indeterminate `variant='bar'` sweep: track measure (4rem \u2014 an inline measure beside a label, not a 100% fill), thickness, corner, the moving segment's share of the track (40%), and the track's tint alpha (0.2)."},{name:"--activity-color",category:"component",tier:"component",role:"Mark ink for `Activity`. ROLE-MIRROR KNOB \u2014 declared `initial` at :root with the role default at the CALL SITE (`hsl(var(--activity-color, var(--muted-foreground)))`), so a scoped `[data-tenant]` / `.dark` override of `--muted-foreground` still reaches it (docs/TOKENS.md \xB7 'Role-mirror knobs MUST be initial'). It retints the default `tone='muted'`; an explicit non-muted `tone` sets its own semantic role."},{name:"--shadow-color",category:"primitive",tier:"primitive",role:"RGB channels (space-separated, e.g. `12 26 49`) that tint the WHOLE elevation ramp (--shadow-xs..2xl) at once. Default `0 0 0`. Single-brand :root only \u2014 a scoped override does not re-resolve the ramp (the steps compute at :root); for a scoped/multi-tenant card lift set --card-shadow to a literal value."},{name:"--shadow-glow",category:"primitive",tier:"primitive",role:"Opt-in brand GLOW halo layered on the primary CTA's resting shadow. Default invisible (`0 0 0 0 transparent`, valid inside a comma shadow list). A service sets the whole value, e.g. `--shadow-glow: 0 8px 20px hsl(var(--primary) / .32)` \u2014 works scoped under [data-tenant] because the service declares it inside the scope."},{name:"--focus-ring-color",category:"primitive",tier:"primitive",role:"Themeable hue of EVERY keyboard-focus ring (HSL components, default var(--ring)). A leaf token, so it re-resolves at the element that paints the ring \u2014 override it once, even scoped under [data-tenant], to retint all focus rings. Pair with --focus-ring-weight (thickness) \u2014 NOT --focus-ring-width, which is derived; see its entry."},{name:"--focus-ring-width",category:"primitive",tier:"primitive",role:"DERIVED, do not set: `calc(var(--focus-ring-weight) * var(--focus-outline))` \u2014 the painted thickness, weight times the on/off switch. Setting it directly paints a ring even while the indicator is switched OFF, which is why src/tokens/__tests__/focus-ring-contrast.test.ts fails the build when any stylesheet rebinds it. Retune --focus-ring-weight instead."},{name:"--focus-ring-weight",category:"primitive",tier:"primitive",role:"THE thickness knob for every keyboard-focus ring; default var(--focus-outline-weight) = var(--stroke-hairline) = 1px, the light mark the ON state ships. Measured in Chromium: switched on it paints a 1px ring in the focus hue at 5.05:1 light / 7.07:1 dark, so WCAG 2.2 SC 1.4.11 (3:1) is met on thickness-independent grounds. For SC 2.4.13 Focus Appearance (AAA), which wants a >=2px perimeter, set --focus-ring-weight: var(--stroke-md) (2px, measured 2px painted, same hue and ratio); var(--stroke-lg) is the heavy 3px mark. Pair with --focus-ring-offset (gap, outline form only) and --focus-ring-color (hue)."},{name:'--focus-outline (axis: <html data-focus-outline="on">)',category:"primitive",tier:"primitive",role:'The one 0/1 switch for the whole keyboard-focus indicator, and it SHIPS OFF (0): nothing paints a focus mark by default, which forfeits WCAG 2.2 SC 2.4.7 (AA) and a JIS X 8341-3 AA claim \u2014 a product decision recorded with its cost in docs/DESIGN-AUTHORITY.md. A consumer turns it on with ONE attribute on the root element: <html data-focus-outline="on"> (AppProvider has the equivalent). Every painted focus length multiplies by it, so no per-component rebind can bring the mark back while it is off.'},{name:"--gradient-{brand,hero,glow}",category:"primitive",tier:"primitive",role:"Opt-in decorative gradient fills, default `none`. --gradient-hero paints the PageContainer header (hero banner); --gradient-glow paints the AppShell .app-main (ambient brand wash); --gradient-brand is a spare. A service sets the full gradient, e.g. `--gradient-glow: radial-gradient(60% 80% at 50% 0%, hsl(var(--primary) / .25), transparent)`."},{name:"--brand-glow{,-color,-alpha,-size,-position}",category:"primitive",tier:"primitive",role:'The decorative brand SPOTLIGHT \u2014 a radial brand halo behind a hero, a CTA band or an auth card, painted by the `.ui-brand-glow` utility class. USE THE CLASS; do not hand-write `radial-gradient(\u2026 hsl(var(--primary) / .18) \u2026)` on a page-local `.glow` div, which is what four separate marketing sections did while this shipped unreferenced (gh#826). Markup is one absolutely-positioned sibling inside a `position: relative` section: `<div className="ui-brand-glow absolute inset-0" />`; the class sets `pointer-events: none` itself, so it never steals a click from the copy above it. Tune without touching markup: `--brand-glow-color` (default `var(--primary)`), `--brand-glow-alpha` (0.18), `--brand-glow-size` (`60% 50%`) and `--brand-glow-position` (`50% 0%`, i.e. top-centre \u2014 set `88% -10%` to push the halo off the top-right corner). Override `--brand-glow` itself for a wholly bespoke gradient. Distinct from --gradient-{brand,hero,glow}, which are whole-fill values consumed by PageContainer and AppShell; this one is a standalone decorative layer you place.'},{name:"--primary",category:"semantic",tier:"semantic",role:"Action color role (HSL components, no hsl() wrapper). Re-theme it on :root OR a nested [data-tenant] scope: hover, press, the primary border and the field focus halo derive from it at the element that paints (see --primary-hover / --primary-active / --primary-border / --control-outline). In a NESTED scope also set --ring, which does not follow."},{name:"--primary-hover / --primary-active / --primary-border / --control-outline",category:"semantic",tier:"semantic",role:"The derived primary family (26.0.0, gh#678). Each is an `initial` knob: its colour is derived from the in-scope --primary at the painting element via `hsl(from hsl(var(--primary)) var(--<name>-channels))`, so a re-themed brand carries through hover, press, border and focus in both themes. OVERRIDE with your own `H S% L%` triplet as before. NEVER read one bare \u2014 `hsl(var(--primary-hover))` paints NOTHING; use the utility (`bg-primary-hover`, `text-primary-hover`, \u2026) or read with the fallback `hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)))`. Retune the derivation by overriding `--<name>-channels` (e.g. `h s calc(l - 8.4)`). docs/CUSTOMER-THEMING.md \xA7Multi-tenant."},{name:"--ring",category:"semantic",tier:"semantic",role:"Focus colour role, default `var(--primary)` on :root / .dark. A public role read directly as `hsl(var(--ring))`, so it resolves where it is declared: a nested scope that overrides only --primary inherits the ROOT ring (the Input focus border stays the root hue while the halo follows). Set --ring alongside --primary in every nested tenant scope. Every focus ring and focus outline reads it through --focus-ring-color at the focused element (--focus-outline-color is an `initial` knob since 26.2.0, gh#687), so setting --ring in the scope retints keyboard focus there."},{name:"--brand / --brand-foreground",category:"semantic",tier:"semantic",role:'The IDENTITY role \u2014 the canonical GoDX emerald (light #009766 = oklch(0.595 0.137 162.94); dark lifts lightness only, #00b87c). It is what `<Logo mark="godx">` / `tone="success">` / the godx wordmark / the `@godxjp/ui/email` brand capsule paint, and it is distinct from THREE lookalikes: --primary (the ACTION colour \u2014 re-theme it freely, the mark never moves), --success (\u82E5\u7AF9 #68be8d, the STATUS green for badges/progress/"saved" text \u2014 the mark once borrowed this and shipped \u0394E76 \u2248 17.5 off canonical), and --text-brand (the blue brand-NUMERAL text slot behind the Tailwind `text-brand` utility). There is no `bg-brand` utility: `--color-brand` is already taken by --text-brand, so identity surfaces read `hsl(var(--brand))` directly in component CSS. Re-brand a service by overriding --brand once (scoped `[data-tenant]` works \u2014 every logo knob resolves it at the call site).'},{name:"--success",category:"semantic",tier:"semantic",role:'Success STATUS role (\u82E5\u7AF9 wakatake #68be8d) \u2014 badges, alerts, progress fills, timeline done dots, `tone="success"` text. NOT the product identity: the GoDX mark reads --brand.'},{name:"--warning",category:"semantic",tier:"semantic",role:"Warning status role."},{name:"--destructive",category:"semantic",tier:"semantic",role:"Destructive/error status role."},{name:"--info",category:"semantic",tier:"semantic",role:"Information status role."},{name:"--attention",category:"semantic",tier:"semantic",role:"Attention status role."},{name:"--surface-{success,warning,info,destructive}",category:"semantic",tier:"semantic",role:"The status SURFACE tier (gh#866) \u2014 the pale GROUND a toned surface paints, as a FINISHED colour (`#E8F5EF`), not HSL components. The other three status tiers are ink: FILL (--success), TEXT (--text-success), MARK (--mark-success); this is the ground they sit on. UNSET BY DEFAULT (`initial`) and it has no default of its own, because there is no single derived value it could carry: Alert washes its hue at 5%, Badge at 10%, the DataTable row tone at 6%, the EmptyState medallion at 12%, the toast color-mixes into --popover. Each surface keeps its own formula AT ITS CALL SITE behind the role \u2014 `var(--surface-success, hsl(var(--success) / var(--alert-bg-alpha)))` \u2014 so unset, everything paints exactly what it painted before (measured: 30/30 computed values byte-identical), and set on a scope, all nine consumers follow: Alert/Banner/Callout, Badge tone, Dialog/AlertDialog/Sheet header band, Toast, ChatBubble, DataTable row tone, EmptyState medallion, Flex surface=\"warning\", the Upload draft-undo strip. SET THIS WHEN A BRAND SHIPS INDEPENDENT PAIRS: `--success #126342` with `--success-soft #E8F5EF` is not a derivation \u2014 the mint is not that green at any alpha \u2014 and before this tier the only move was to lighten the success TEXT until its wash matched, damaging the ink to fix the ground. Declared `initial` rather than bound at :root so a scoped `[data-tenant]` reaches the component instead of freezing on <html> (docs/TOKENS.md \xB7 'Role-mirror knobs MUST be initial'). NO primary/attention entry (a brand ships soft pairs for the four statuses only) and NO border role \u2014 --alert-border-alpha and --chat-bubble-tone-border-alpha keep deriving the edge. CONTRAST: this library paints the TEXT tier on these grounds, which clears AA on the reference kit (6.22 / 5.48 / 6.64 / 7.34:1); the Callout RAIL is the FILL tier and measures 1.99:1 (success) and 1.62:1 (warning) there, under SC 1.4.11 \u2014 inherited, not introduced (2.12 / 1.69:1 on the derived tint), and repaired through --mark-*."},{name:"--border / --input",category:"semantic",tier:"semantic",role:"TWO roles, NOT synonyms \u2014 never set one to the other. --border is DECORATIVE chrome: table rules, card edges, section dividers, Separator. WCAG 2.2 SC 1.4.11 does not reach it (a divider is not \"required to identify a component or its state\") and this system's dense JP grid depends on it staying quiet \u2014 light `30 7% 83%`, dark `45 6% 22%`. --input is the CONTROL BOUNDARY: the 1px edge of Input/Textarea/Select/outline Button/TagInput/the composite date field/the topbar search (the Tailwind `border-input` utility reads it), plus the Switch's unchecked track fill. A field has no fill of its own and no shadow, so that edge is the whole visual claim that you may type there \u2014 it owes SC 1.4.11's 3:1 against EVERY surface a control sits on, not just the plain page: light `30 7% 53%` (3.47:1 on --background/--card/--popover, 3.18:1 on --muted/--secondary, 3.35:1 on a zebra row), dark `45 6% 47%` (4.22:1 on --background, 3.88:1 on --card/--popover, 3.17:1 on --muted). They shipped sharing one value and put every text field at 1.46:1. A service re-theming neutrals MUST move the two independently; `src/tokens/__tests__/input-boundary-contrast.test.ts` recomputes the ratios and fails below 3:1 or if the two roles are re-coupled. To quieten the Switch off-track without dragging --input back down, override --switch-unchecked-background instead."},{name:"--page-header-divider",category:"semantic",tier:"semantic",role:"PageContainer header bottom divider. Default none; a service theme opts in with `1px solid hsl(var(--border))`."},{name:"--page-footer-divider",category:"semantic",tier:"semantic",role:"PageContainer footer top divider \u2014 the third page-chrome band, on the same contract as `--page-header-divider` and `--page-toolbar-divider` (its rule used to be a hard literal in layout.css, so a page could not turn it off at all). Declared `initial` and resolved at the CALL SITE as `var(--page-footer-divider, 1px solid hsl(var(--border)))`, so a scoped [data-tenant]/.dark override still reaches it. It is the ONE chrome divider whose default is a RULE rather than silence, deliberately: `footer` is the shared slot a form's Save/Cancel bar lands in, where the line separating the actions from the page content is the behaviour every existing page already draws \u2014 the old literal IS the fallback, so unset is byte-identical. Set `--page-footer-divider: none` when the footer content already carries its own frame (a chat composer is a bordered Card, and the shell's full-width rule otherwise stacks a second line right above it)."},{name:"--overlay-background",category:"semantic",tier:"semantic",role:"Modal scrim \u2014 the single backdrop colour shared by every overlay (Dialog, AlertDialog, Sheet, Drawer, AppShell mobile nav). Default `rgb(0 0 0 / 0.5)`. A service tints it once, e.g. a navy `rgb(12 26 49 / .55)`. HOW IT REACHES AN OVERLAY: each surface declares its own `--*-overlay-background` knob `initial` and resolves a SHARE of this colour at the call site, `color-mix(in srgb, var(--overlay-background) var(--*-overlay-alpha), transparent)`, so the calibrated per-surface depth survives (Sheet/drawer 40% = 0.2, Dialog 60% = 0.3) while ONE override here retints them all. NOTE: portaled overlays render outside a [data-tenant] subtree, so for multi-tenant scoping put the tenant attribute on the portal container too."},{name:"--page-toolbar-{background,pad-block,divider}",category:"semantic",tier:"semantic",role:"PageContainer `toolbar` band chrome \u2014 the FIXED strip between the page header and the (scrolling) body. All three knobs are quiet by default (rule #44). `--page-toolbar-background` (default `transparent`) is the band's GROUND: set it ONCE in a service theme \u2014 `--page-toolbar-background: hsl(var(--card));` \u2014 to lift the band off the page ground the way a chat channel's workflow rail or a collection's filter strip usually wants. It is bound at `:root` rather than `initial` because its default is a plain CSS keyword, not another role token, so there is nothing for a scoped override to re-resolve; it is the `background` shorthand, so a gradient works too. NEVER write `className=\"bg-card\"` on the strip at the call site \u2014 that is hand-laid page chrome, it is invisible to per-tenant theming, and it paints the strip rather than the band (so it misses the page gutters and the `measure` cap). `--page-toolbar-pad-block` (default 0) is the band's own block inset. It is the band's ONLY breathing room: the band sits FLUSH against the header and the body (the container's band gap is cancelled on the band itself \u2014 chrome is attached, not a third section floating between two voids), so there is no outside space to tune. It stays 0 even now that the band can be painted: a TRANSPARENT band is not a surface and has no inside for an inset to breathe, and under `fill` every pixel of band height is taken from the scroll viewport the slot exists to protect. The corollary is that a theme which PAINTS the band must also set the inset here (`--page-toolbar-pad-block: var(--space-2)`) \u2014 the two go together, and neither belongs in a `py-*` utility at the call site. `--page-toolbar-divider` is declared `initial` and resolved at the CALL SITE as `var(--page-toolbar-divider, var(--page-header-divider))` \u2014 so ONE `--page-header-divider` opt-in rules the whole page chrome consistently, a scoped [data-tenant]/.dark override of it still reaches the band (a `:root` binding would freeze it), and `--page-toolbar-divider: none` silences just the band. `variant=\"ghost\"` keeps the divider quiet regardless (it does NOT clear the background \u2014 ghost is about rules and pads, not grounds). The band's inline gutters and its `measure` cap are shared with the header and body \u2014 they are not separate knobs, which is what keeps the three bands aligned."},{name:"--page-title-font-size-chrome",category:"semantic",tier:"semantic",role:'PageContainer title step under `headerScale="chrome"` \u2014 a page whose top row IS chrome (a chat channel name, a mail subject, an IDE tab) rather than a document title. Default `var(--heading-h3)` = `--font-size-base` (14px), the body step, so the row reads as a label ON the surface instead of the page\'s headline; a consumer chat header measured 61px with a 20px h1 against a design that wanted ~40px at the `sm` step. Deliberately a THIRD knob beside `--page-title-font-size` / `--page-title-font-size-compact`: those two are one document title at two viewport sizes (a responsive step), this is a different KIND of page and holds at every width \u2014 the compact rule must not pull a chrome header back up to h2. Read ONLY when the prop is passed, so a document page never touches it (rule #44). A service retunes the chrome step here once; never override `--page-title-font-size` at a call site to fake it.'},{name:"--page-subtitle-font-size-chrome",category:"semantic",tier:"semantic",role:'PageContainer SUBTITLE step under `headerScale="chrome"` \u2014 the caption under a chrome top row (a channel purpose line, a mail preview), not a document\'s standfirst. Default `var(--font-size-2xs)` (ratio\u207B\xB2, ~11px), two steps below the document default `--font-size-base`. It is a fourth knob beside `--page-subtitle-font-size` / `-compact` for the same reason the title step is: those two are ONE document subtitle at two viewport sizes, this is a different KIND of page and holds at every width \u2014 and it has to out-rank the 720px compact rule, which is already a compound selector, or a chrome caption would step back UP on a phone. Two things it fixes at once. Hierarchy: at the document step the chrome subtitle rendered at `--font-size-base`, the IDENTICAL step the chrome TITLE takes, so a channel name and its purpose line read as one undifferentiated block. Height: the step drives the LINE BOX at the inherited `--line-height-body` (14px x 1.7 = 23.8px vs 11px x 1.7 = 18.9px), so a band whose whole point is to leave room for the transcript stops spending ~5px of it on a caption. Type only \u2014 line-height, colour and weight stay with the base rule, so a wrapped JA/VI purpose line keeps its rhythm. Read ONLY when the prop is passed (rule #44); a service retunes the caption step here once, never with a `text-*` utility at the call site.'},{name:"--page-pad-block-start-chrome",category:"semantic",tier:"semantic",role:"PageContainer TOP inset under `headerScale=\"chrome\"` \u2014 the second half of the same fact the title step answers: chrome sits ON the frame's edge. Default `0px`, so a chrome page opens flush; a document page keeps `--space-page-active-y` (24px, 16px below the 720px step) because a title needs air above it. Measured on a consumer chat screen: an otherwise correctly-sized channel head started at y=24 against a design that starts it at y=0, and those 24px came straight off the transcript viewport (617px in the design, 587px in the app). It is a knob rather than a literal (rule #44) so a service whose grid wants its chrome inset writes `--page-pad-block-start-chrome: var(--space-2)` once instead of forking the page shell, and it is read ONLY when the prop is passed, so no document page resolves it. Block-start only \u2014 the page's bottom edge belongs to `stickyFooter`, which zeroes it for its own reason."},{name:"--page-header-min-block-size-chrome",category:"semantic",tier:"semantic",role:"PageContainer BAND HEIGHT under `headerScale=\"chrome\"` \u2014 the third half of the same fact the title step and the flush top edge answer. A document header is content-height, correctly: a title is as tall as the title is. Chrome is furniture, and furniture needs a band that things centre INTO. Without one, the band's vertical centre is a function of its own copy \u2014 measured in Chromium on the catalogue page, 42.02px with an `extra` control and 40.38px without \u2014 so nothing in the page can be aligned to it and no service can aim at a number. Default `auto` (rule #44, the quiet state): no floor, content-height, byte-identical to every page shipped before the token existed, chrome pages included. The BAND-HEIGHT AXIS HAS ONE OWNER and it is `--app-shell-bar-height` (`--centered-shell-bar-height` already reads it), so the one line a service writes to put its page chrome on the shell bar's band is `--page-header-min-block-size-chrome: var(--app-shell-bar-height)` \u2014 the band becomes 48px and the title column and `extra` both centre at y=24 regardless of copy length. It is NOT that value by default because a chrome `PageContainer` is not necessarily inside an `AppShell` (the canonical chat composition renders one inside a bordered region, a SplitPane pane, a Card), and a band that is not trying to line up with a bar has no business inheriting that bar's height. A MIN, never a height: a taller `extra` (an `lg` control, a wrapped JA/VI channel name) still fits instead of overflowing. The header's own `--page-header-pad-bottom` lives INSIDE the band (border-box); under the canonical chrome composition (`variant=\"ghost\"`) that pad is 0 and the centring is exact."},{name:"--page-header-pad-bottom",category:"semantic",tier:"semantic",role:"PageContainer header bottom inset. Defaults to page top padding minus the section gap so the title band is vertically balanced."},{name:"--master-detail-rail-{compact,standard}",category:"semantic",tier:"semantic",role:"MasterDetail fixed rail track \u2014 18.75rem (300px) / 20rem (320px). The `railWidth` prop picks the preset; a service theme retunes the presets themselves. Consumers never author a grid track."},{name:"--master-detail-gap",category:"semantic",tier:"semantic",role:"Gap between the MasterDetail master and detail regions (default --space-stack-md), side by side and stacked."},{name:"--master-detail-collapse-below",category:"semantic",tier:"semantic",role:"MasterDetail stacking threshold (default 40rem / the `sm` step), measured against the composition's OWN inline size, not the viewport: wider keeps the split, narrower stacks master above detail. A real knob \u2014 the layout resolves it inside a flex-basis calc(), because a media/container-query CONDITION cannot read a var(). The `collapseBelow` prop overrides it per instance (rule #45)."},{name:"--master-detail-master-viewport-{compact,standard}",category:"semantic",tier:"semantic",role:'Bounded MasterDetail master viewport \u2014 20rem (320px) / 28rem (448px), selected by the semantic `masterViewport` prop. `masterViewport="auto"` (the default) applies NO bound, so existing compositions are unchanged; the presets cap the collection\'s block size and scroll it INSIDE the region, which is what stops a long real collection from pushing the detail below the fold once the layout stacks. Retune the presets in a service theme exactly like --master-detail-rail-*; never author a pixel max-height in consumer CSS.'},{name:"--master-detail-master-viewport-inset",category:"semantic",tier:"semantic",role:"Focus-ring room inside a bounded MasterDetail master region (default --space-1 / 4px), and its scroll-padding. An overflow container clips BOTH axes, so without this inset the focus ring of a row at the region's edge would be cut off; it also keeps a row scrolled into view off the clip edge. Only applies when `masterViewport` is compact/standard."},{name:"--page-header-extra-measure",category:"semantic",tier:"semantic",role:'Inline measure of the PageContainer header `extra` region while `headerLayout="responsive-inline"` and the page is below the 640px step (default 11rem / 176px). The default `headerLayout="stack"` never reads it \u2014 `extra` keeps wrapping onto its own full-width line under the subtitle. At >=640px both arrangements are identical, so this token only governs the compact range.'},{name:"--space-section-{band,hero}",category:"semantic",tier:"semantic",role:'The MARKETING BAND rhythm \u2014 the block-axis padding of a full-bleed section band (--space-section-band, 80px = --space-20) and of the hero band that opens the page (--space-section-hero, 96px = --space-24). Not to be confused with --space-section (16px), which is the gap BETWEEN the blocks of one admin page. Named --space-section-* and NOT --space-band-*: `band` already means "the vertical extent of a control or row" in this library (--band-height-*, rule #24), and a second meaning for the same word is the drift check:prop-vocabulary exists to stop. Both alias the linear --space-* grid rather than the \u03C6 ladder, for the reason semantic/layout.css states at the top of the block, and both are re-declared in styles/density.css because a knob that aliases a --scaling-derived step and is not re-derived in a descendant density scope freezes at :root (docs/TOKENS.md). A fluid band clamps BETWEEN the two rather than inventing a third value.'},{name:"--page-measure-{narrow,medium,wide}",category:"semantic",tier:"semantic",role:'Bounded PageContainer MEASURE presets \u2014 42rem (672px) / 48rem (768px), selected by the semantic `measure` prop. `--page-measure-wide` (72rem / 1152px outer, 1104px surface) is the MARKETING measure and is the one member with NO `measure` branch yet: it is the vocabulary a full-bleed landing composition caps its own shell with, added because two unrelated website showcases each hand-wrote 1200px / 1140px when the widest name here was 768px. The industry wide-container cluster runs 1136-1320px (Radix Container 4 = 1136, Tailwind max-w-7xl and Primer .container-xl = 1280, Bootstrap = 1320); 72rem is Tailwind --container-6xl and sits between the two measured showcase values. Do not give a reading column a wide measure \u2014 prose stays at narrow/medium, which bracket Bringhurst\'s 45-75 character band. They are OUTER measures: the package-owned page gutters (--space-page-active-x, 24px each side) sit INSIDE the cap, so the VISIBLE surface is 624px / 720px, and at 390px nothing binds (358px surface at the 16px compact gutter). Unlike variant="narrow" \u2014 which caps only .ui-page-body \u2014 the measure caps the page HEADER and the BODY together, so a header `extra` action ends flush with the body surface. `measure="default"` (the default) reads NEITHER token and matches no rule, so existing pages are unchanged. Retune the presets in a service theme; never author a page-local max-width.'},{name:"--badge-space-*",category:"component",tier:"component",role:"Badge spacing."},{name:"--button-count-{min-width,space-inline,font-size} / --button-count-{background,color} / --button-count-{default,destructive,secondary}-{background,color}",category:"component",tier:"component",role:"Button's COUNTER PILL (`count` / `overflowCount` / `showZero`). The COLOUR knobs exist because the pill used to tint itself translucently over whatever surface the button happened to have (`bg-primary-foreground/15` on filled variants, `bg-foreground/8` on the outline family), which means its contrast was a FUNCTION of that surface rather than a property of the pill \u2014 and five variant x theme x hover combinations measured below the 4.5:1 that WCAG 2.2 SC 1.4.3 requires of small text: default 3.88 light, destructive 4.29 dark, and the outline family 4.32 light at rest, 3.64 light on hover, 3.68 dark on hover. The two worst were HOVER states, which is exactly why a screenshot sweep never found them: `--accent` only exists under the cursor. The fix is the treatment validated on Toggle: OPAQUE role fills, so the ratio no longer depends on the variant or on hover. Each filled variant wears its OWN label pair SWAPPED (default --primary on --primary-foreground = 5.04 light / 7.07 dark; destructive 6.10 / 5.53; secondary 14.25 / 12.40), which makes the pill exactly as legible as the label beside it and impossible to make worse without making the button itself unreadable first \u2014 a promise a fixed colour could not make across re-themes. The outline family shares one pill, --foreground on --muted (14.25 / 12.40), whose --muted fill sits 1.09:1 against the button's own ground, so at rest the counter still reads as quiet text rather than a badge: it is the legibility of the DIGITS that rose, not the loudness of the pill. All eight colour knobs are ROLE-MIRROR knobs -- `initial` at :root with the role default at the CALL SITE -- so a scoped `.dark`/`[data-tenant]` override of the role reaches the pill. The geometry knobs are byte-identical to Toggle's, asserted by a token-parity test."},{name:"--toggle-count-{min-width,space-inline,font-size,radius,gap} / --toggle-count-{background,color} / --toggle-pressed-count-{background,color} / --toggle-pressed-border-color / --toggle-count-forced-outline-width",category:"component",tier:"component",role:"Toggle's COUNTER PILL (`count` / `overflowCount` / `showZero` / `countLabel`) \u2014 the counted, PRESSED chip Button could not express. SHARE vs SPLIT is the whole point of this group. GEOMETRY is shared: the five geometry knobs carry Button's exact counter values off the same primitive scale (var(--space-4) / var(--space-1) / var(--font-size-xs) / var(--radius-pill) / 0), so a Toggle count set beside a Button count measures identically in a browser (12.47px, 16px min-inline, 4px inline padding, pill radius, tabular-nums) and a token-parity test fails if either side moves alone. `--toggle-count-gap` is ADDITIVE to the toggle's own flex gap and defaults to the quiet 0 (rule #44). COLOUR is deliberately NOT shared: Button's pill sits on a static variant surface and tints itself translucently, but Toggle's pill sits on a surface that INVERTS when pressed, where that treatment cannot clear WCAG 1.4.3 AA at the xs step (measured 3.82:1, and 4.39:1 even at the lowest usable alpha \u2014 the ceiling is the chip label's own 5.04:1 and any tint only lowers it). So Toggle uses OPAQUE role fills that make its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted (14.18:1 light / 12.44:1 dark), pressed --primary on --primary-foreground \u2014 the chip label's own pair, swapped (5.04:1 light / 7.05:1 dark), so the pill is exactly as legible as the label beside it. All five colour knobs are ROLE-MIRROR knobs: `initial` at :root with the role default at the CALL SITE, so a scoped `.dark`/`[data-tenant]` override of the role actually reaches the pill. `--toggle-pressed-border-color` defaults to the pressed fill itself (quiet, #44) and is the knob a service overrides when its pressed fill is a PALE tint that weakens the inversions. `--toggle-count-forced-outline-width` (1px) draws the pressed pill's outline under `forced-colors: active`, where every fill is flattened and neither inversion encodes anything \u2014 together with the chip border following the system Highlight, that keeps the pressed state off colour alone (WCAG 1.4.1)."},{name:"--toggle-soft-{background,color,hover-background} / --toggle-soft-count-{background,color}",category:"component",tier:"component",role:'Toggle `variant="soft"` \u2014 the chip\'s REST SURFACE (gh#734). It exists because neither shipped variant could draw one: `default` is a 1px TRANSPARENT border and `outline` a hairline on --background, so a filter chip was invisible until it was pressed, and a consumer building a tag panel reported its tags "look transparent" and fell back to a Button that paints no pressed state at all. The defaults are hsl(var(--secondary)) fill with hsl(var(--secondary-foreground)) text \u2014 byte-identical to `Badge variant="secondary"` and `.ui-button--secondary`, so a chip, a badge and a button on one row are one family and a service that re-themes --secondary moves all three at once. HOVER is the OPAQUE --secondary-hover, not Button\'s translucent `--secondary / 0.8`: a chip row sits on the page AND inside a Card, and a translucent hover takes its value from whichever surface is under it, so the same chip would read differently on each. The COUNT knobs are a separate pair because the generic resting pill cannot be inherited here: its default fill is --muted, and --muted and --secondary are the SAME value in the shipped theme (45 15% 95%), so that pill would measure 1.00:1 on a soft chip and vanish \u2014 the gh#602 failure on a different control. The soft pill takes hsl(var(--background)) instead, which is as quiet against the chip as the default pill is against its own (1.10:1) while carrying --foreground at full strength, and is opaque so the ratio does not move with hover. All five are ROLE-MIRROR knobs: `initial` at :root with the role default at the CALL SITE, so a scoped `.dark`/`[data-tenant]` override of the role reaches the chip. The PRESSED rules still out-specify every one of them, so the pressed state is unchanged.'},{name:"--logo-godx-{size,size-xs|sm|md|lg,color} / --logo-success-{background,foreground} / --logo-identity-foreground",category:"component",tier:"component",role:'The GoDX IDENTITY mark. COLOUR: its default is the --brand IDENTITY role (canonical emerald) \u2014 deliberately independent of --primary, so a re-themed action colour never recolours the brand, AND of --success, the \u82E5\u7AF9 STATUS green it must never default to (`tone="success"` names the semantic SLOT, not the status role). Role-mirror knobs: declared `initial` at :root with the role default at the CALL SITE (`hsl(var(--logo-godx-color, var(--brand)))`), so a scoped `.dark`/`[data-tenant]` override of --brand actually reaches the mark. BOX: `--logo-godx-size-{xs,sm,md,lg}` (1.5 / 1.75 / 2 / 2.5rem) is the identity mark\'s own size ramp \u2014 the `size` prop drives it exactly like --logo-size-* drives the boxed glyph, one tier above its glyph sibling because the artwork is a capsule inside a square viewBox. `--logo-godx-size` is the PIN, not the base: `initial` by default (so the tiers apply) and, set once by a service theme, it freezes the mark at that box on EVERY tier. INK: `--logo-identity-foreground` (48 9% 9%, #191815) is the colour the boxed `mark="glyph"` sets its TEXT in on the identity fill \u2014 deliberately NOT --brand-foreground. --brand-foreground is the artwork KNOCKOUT colour (it tracks --background in both themes, because `mark="godx"` punches its inner bar as an evenodd HOLE and the email mark paints that hole solid to match) and as negative space only owes WCAG 2.2 SC 1.4.11\'s 3:1. The boxed glyph renders real TEXT, so SC 1.4.3 applies at 4.5:1 \u2014 14px bold is NOT "large text" (that needs 18.66px bold / 24px) \u2014 and knockout white on the emerald measured only 3.67:1, a straight AA failure. The ink is theme-INVARIANT (it is the same near-black spine the dark theme already resolved to), so dark is unchanged at 6.89:1 and light rises to 4.74:1. It is NOT a role-mirror knob \u2014 its default is a real value, not a role, so there is no role to freeze and it is declared at :root, not `initial`. Re-theming --brand to a DARK fill? Override the public knob --logo-success-foreground to re-invert the ink. Applies to `<Logo mark="godx">` / `tone="success"`.'},{name:"--logo-wordmark-{gap,font-size-xs|sm|md|lg,font-weight,letter-spacing,font-family,color}",category:"component",tier:"component",role:'Wordmark/lockup knobs for `<Logo wordmark="\u2026" />` \u2014 the mark\u2194wordmark gap, the per-size-tier wordmark type ramp, and its face/weight/tracking/colour. The package ships NO wordmark artwork: `--logo-wordmark-font-family` defaults (at the call site) to --font-family-display, so the wordmark is typeset in the design-system face; pass an inline <svg> as `wordmark` when a real logotype exists. `--logo-wordmark-color` is a role-mirror knob (`initial`) whose call-site default is hsl(var(--foreground)), or the --brand IDENTITY role on the godx / tone="success" lockup \u2014 never --primary and never the --success status green. Setting it once in a service theme re-colours every lockup with no page CSS.'},{name:"--card-*",category:"component",tier:"component",role:"Card surface, border, spacing, and typography."},{name:"--control-*",category:"component",tier:"component",role:"Shared form control heights, padding, icons, and focus chrome."},{name:"--control-affix-{inset-inline-end,action-size,action-radius,icon-size,rest-alpha} / --control-trigger-space-inline-end",category:"component",tier:"component",role:"OVERLAY trailing affix \u2014 the clear \u2715 / chevron a select-family trigger parks ON TOP of its inline end. One set for Select, SearchSelect, Cascader and TreeSelect (`.ui-control-affix-action` / `-icon` / `-indicator`); the Dialog and Sheet close \u2715 borrow `--control-affix-icon-size` so every overlay \u2715 in the system is one size. Before #319 each of those hard-coded the same `end-2 size-6 rounded-sm opacity-50` stack, so retuning affix weight meant chasing the same literal through four components and missing one. `--control-affix-rest-alpha` (0.5) is the resting weight and is deliberately QUIETER than the inside-field set's 0.7 (`--control-inline-affix-rest-alpha`): an overlay affix floats over the selected value, so at equal weight the \u2715 starts reading as content. `--control-trigger-space-inline-end` (2.25rem, a raw rem because the `pe-9` it replaced is a flat Tailwind step, not a density-scaled one) is the inline room the trigger reserves so a long selected label never runs UNDER the affix \u2014 grow the affix without growing this and the label collides with it; shrink it without shrinking this and you ship dead space at every trigger's end."},{name:"--control-inline-affix-{size,icon-size,space-gap,inset-inline,rest-alpha,space-inline-end}",category:"component",tier:"component",role:"INSIDE-FIELD affix \u2014 the leading/trailing controls Input, Textarea, TimePicker and DatePicker render WITHIN the field box, as opposed to the overlay set (`--control-affix-*`) that a select-family trigger parks on top of. Kept a SEPARATE set on purpose, not an alias: these sit on the field's own surface rather than over it, so they rest heavier \u2014 `--control-inline-affix-rest-alpha` is 0.7 against the overlay's 0.5. Collapse the two into one knob and one side always loses: either the inline affixes go too faint to find, or the overlay \u2715 starts fighting the value it sits on. `--control-inline-affix-space-inline-end` (2.25rem) reserves room for exactly one affix. Pickers show clear when nonempty and clearable; otherwise they show their calendar/clock. Never render both. Textarea has no single line to centre on, so it pins its clear to the top-end corner via `--textarea-clear-inset-block-start` rather than centring like Input."},{name:"--textarea-autogrow-{line-height,min-height-rows,max-height-rows,box-inset} / --control-multiline-padding-block",category:"component",tier:"component",role:"Textarea `autoGrow` geometry \u2014 the box that grows with its content. The floor and ceiling are counted in TEXT ROWS (`--textarea-autogrow-min-height-rows` 1, `--textarea-autogrow-max-height-rows` 8), not pixels, because a row count survives a density change and a `--font-size-base` retheme while a px ceiling silently stops matching the visible line count. A service sets its composer's resting and maximum height once in theme; the `minRows` / `maxRows` props override per instance \u2014 the same theme-global / prop-local priority as `--form-label-width` vs `labelWidth`. `--textarea-autogrow-line-height` is `initial` at :root and read as `var(--textarea-autogrow-line-height, var(--line-height-normal))` at the call site, so a service that retunes the multiline line-height for CJK legibility retunes the row unit with it instead of getting a ceiling that no longer means eight visible lines. `--textarea-autogrow-box-inset` is the non-text part of the box the row maths adds back (block padding + border, both edges) and `--control-multiline-padding-block` is that block padding, shared with `.ui-control-multiline` itself so the two cannot drift. The floor is additionally clamped up to `--control-height`, so a resting one-row composer still lines up with the Input / Button on its row rather than undercutting the control tier. Every default reproduces today's geometry when `autoGrow` is absent."},{name:"--control-composite-field-*",category:"component",tier:"component",role:"The bordered two-input shell (`.ui-control-composite-field`) used by `DatePicker range` (at every `picker` granularity): one field box wrapping two inputs plus a separator so the pair reads as a SINGLE control instead of two adjacent ones. `--control-composite-field-space-gap` (`--space-2`) is the rhythm between the halves and the separator. Shared deliberately \u2014 before #319 each picker carried its own literal and the range fields drifted into slightly different boxes, the tell that a design system is not actually one system. The box's height, border, disabled state and focus chrome still come from `--control-*` / `.ui-control`, so retune this only for the internal gap; anything else belongs on the control family."},{name:"--menu-item-{height,radius,space-inline,space-gap,font-size,inset-space-inline-start} / --menu-content-{space-inset,min-width}",category:"component",tier:"component",role:"ONE row rhythm for every popup list surface: DropdownMenu AND Select's listbox lay their rows out against these (`.ui-select-item` sits in the same rule as `.ui-dropdown-menu-item`), so a service retunes menu density once instead of per surface. Before #319 the height was a literal `2rem` in the CSS and DropdownMenu had not been converted at all \u2014 it carried its whole box as Tailwind literals on the component. Set `--menu-item-height` and every menu surface resizes together; patch one component's padding instead and you get the menus-that-almost-match tell. `--menu-item-inset-space-inline-start` is the indicator column an inset row (a checkbox/radio row with no indicator of its own) reserves so its label stays aligned with its checked siblings \u2014 move it whenever you change `--menu-indicator-size`, or the two columns desynchronise. `--menu-content-min-width` (10rem) and `--menu-content-space-inset` are the panel, not the row; DropdownMenu re-points the min-width at `--dropdown-content-min-width` (8rem) because it anchors to a small trigger, so override that one to widen dropdowns alone."},{name:"--table-*",category:"component",tier:"component",role:"Table row/cell sizing."},{name:"--table-pagination-padding-{y,x}",category:"component",tier:"component",role:"DataTable.Pagination footer inset. The footer used to declare `padding-top` ONLY, so in the documented flush container (`<Card><CardContent flush><DataTable/>`) the 'rows per page' label and the page-size Select sat flush against the container edge and its closing border. It now owns `padding-block` + `padding-inline`. Both knobs are declared `initial` with the default at the CALL SITE \u2014 block `var(--space-stack-sm)` (the old padding-top value, now on both block edges), inline `var(--table-cell-space-x)` so the label lands on the same optical axis as the first column's text. `initial` is load-bearing: both defaults are density-scaled and re-declared inside a `.ui-density-*` subtree, and a `:root` binding would freeze the footer at the `:root` density. Consumers no longer need a local `.ui-data-table-pagination` override; a service on another grid retunes either axis."},{name:"--table-surface-min-inline-size",category:"component",tier:"component",role:'DataTable surface narrow-viewport width FLOOR. Below the `sm` viewport step a multi-column admin grid whose cells are `white-space: nowrap` would be crushed, so the bordered surface keeps a minimum inline size and `.ui-data-table-scroll` scrolls instead. This shipped as a hard-coded `min-w-[640px] sm:min-w-0` utility pair ON the surface element \u2014 the literal that forced the horizontal scroll at 390 \u2014 leaving a service that wants a narrower (or no) floor with no route but forking the component (rule #45). Default `640px`, byte-identical to the old utility, and deliberately px so the floor releases at exactly the same width as the px-based `sm` media query that clears it (a rem value drifts under a non-16px root and re-introduces the scroll between the two thresholds). Set `0` to opt out; `DataTable preset="action-collection"` already does, because there the column-priority measures own the width.'},{name:"--form-label-width",category:"component",tier:"component",role:"Label column width in horizontal Form layout. Default max-content; a service theme sets it once (e.g. 110px) \u2014 the labelWidth prop overrides per form/field."},{name:"--form-label-gap",category:"component",tier:"component",role:"Label\u2194control column gap in horizontal Form layout. Default 16px (--space-4)."},{name:"--dialog-* / --alert-* / --skeleton-*",category:"component",tier:"component",role:"Feedback component sizing and spacing."},{name:"--banner-{radius,border-width,space-inset-block,space-inset-inline}",category:"component",tier:"component",role:'Banner strip geometry \u2014 the full-bleed presentation of the Alert primitive (`<Banner>` / Alert variant="banner"). radius 0 (square strip corners), a single hairline block-end rule (tone-coloured by the alert rules), block inset denser than the inline card (--space-3), inline inset defaulting to the page gutter (--space-page-active-x) so banner text aligns with page content. Colour stays entirely with `tone`; a service retunes the strip once here \u2014 a consumer never writes CSS to place a banner.'},{name:"--page-header-status-gap",category:"semantic",tier:"semantic",role:"Gap between the page title and its status/meta band (PageContainer `status`), and between the band's own items. Default --space-inline-sm. The band shares the title line and wraps under it on compact viewports; a page that never passes `status` reads neither the token nor the wrapping row."},{name:"--sheet-responsive-breakpoint-width / --sheet-bottom-max-height",category:"component",tier:"component",role:`The responsive drawer / detail-panel contract (SheetContent responsive="auto"). --sheet-responsive-breakpoint-width (default 48rem = 768px, the library's canonical mobile line) is the viewport width at and below which the desktop side panel becomes a mobile bottom sheet; --sheet-bottom-max-height (default 85dvh) caps THAT bottom presentation only (a plain side="bottom" sheet stays content-sized). Because a CSS @media cannot resolve a custom property, the breakpoint is read off :root at runtime by the exported useSheetResponsiveMode() hook \u2014 which is also what OrgSwitcher responsive="auto" uses, so ONE knob moves the popover\u2192sheet and side\u2192bottom line for every overlay at once. Accepts px/rem/em.`},{name:"--carousel-arrow-{size,icon-size,inset-block-start}",category:"component",tier:"component",role:"The Carousel prev/next arrows, as THREE separate decisions. `--carousel-arrow-size` is the BUTTON box and therefore the touch target (default 2rem/32px, above WCAG 2.2 SC 2.5.8's 24px floor) \u2014 a brand whose own standard is 44px sets `2.75rem` here and nothing else moves. `--carousel-arrow-icon-size` is the mark inside it, on the icon scale (1rem). `--carousel-arrow-inset-block-start` overrides the vertical placement, whose default is the middle of the SLIDES rather than of the component (the dots row is subtracted back out). The box token is gh#931: it used to be two bare literals, which made the target the one dimension a theme could not reach. The arrows are absolutely positioned over the rail edges by design; there is no prop that moves them into a caption row."},{name:"--scroll-area-anchor-offset",category:"component",tier:"component",role:'ScrollArea `anchor="bottom"` stickiness band: how close to the bottom edge the reader still counts as "following the stream". Inside it, arriving content keeps the viewport pinned to the newest item; one pixel beyond it the reader is reading history and anchoring never moves them again until they come back (WCAG 3.2.5). Sized to the row height a service renders \u2014 a dense audit line is ~20px, a chat bubble with an avatar ~64px, and "one row from the bottom" is what the reader means. In rem so the band is still one row at 200% zoom. A CSS comparison cannot express it, so the component reads the token off the element at mount (px/rem/em accepted); the `anchorOffset` prop overrides it per instance. The rail geometry knobs (--scroll-area-bar-size / -bar-padding / --scroll-area-thumb-radius) live with the data-display tier.'},{name:"--qr-code-*",category:"component",tier:"component",role:"QrCode scanner-safe foreground/background and xs/sm/md/lg natural-size tiers. Keep foreground/background at strong contrast; the defaults remain dark-on-light in dark application themes."},{name:"--chart-trend-plot-height{,-xs,-sm,-md,-lg}",category:"component",tier:"component",role:"CompactBarTrend plot-height tiers (xs 3.5rem = dashboard summary-card density, sm 5rem, md 7.5rem, lg 10rem). The `size` prop picks a step via data-size; a service retunes the whole scale here. This is why a consumer NEVER writes an inline height for a compact trend."},{name:"--chart-trend-bar-{gap,radius,max-width,min-height}",category:"component",tier:"component",role:"CompactBarTrend mark geometry: gap between bars (default --space-2), rounded data-end radius (--radius-sm), the per-mark width ceiling (1.5rem, so a 3-point trend does not render slabs) and the min height floor (2px, so a zero value still reads as a plotted category). All service-tunable (rule #45)."},{name:"--chart-trend-bar-background{,-alpha} / --chart-trend-bar-emphasis-background",category:"component",tier:"component",role:"CompactBarTrend fills \u2014 role-mirror knobs declared `initial` with the role default at the call site. Muted marks default to hsl(var(--muted-foreground) / --chart-trend-bar-background-alpha) (0.75, which clears the 3:1 non-text contrast floor); the emphasized 'current' mark defaults to hsl(var(--primary)). Point them at --chart-N to tint a trend to a series colour."},{name:"--chart-trend-baseline-border",category:"component",tier:"component",role:"CompactBarTrend baseline rule. QUIET by default (rule #44 \u2014 resolves to `none`); a service opts in with `--chart-trend-baseline-border: 1px solid hsl(var(--border));`."},{name:"--chart-trend-{tick-gap,tick-font-size,footer-gap}",category:"component",tier:"component",role:"CompactBarTrend category-tick and activity-footer rhythm \u2014 the plot\u2194tick gap, tick type size (--font-size-xs) and the plot\u2194footer gap."},{name:"--email-shell-{width,padding,page-padding,border-width} / --email-card-{radius,reference-height} / --email-stack-gap{,-sm}",category:"component",tier:"component",role:"Transactional-email shell geometry: the 480px card width, its 32px inset, the 24px viewport gutter, the 1px edge, the 10px radius (mirrors --card-radius) and the block rhythm. The canonical invitation reference measures 480\xD7407 (--email-card-reference-height is a visual-regression target, NEVER a fixed height on the card). Values are LITERAL px \u2014 email clients resolve neither var() nor rem \u2014 and are consumed through the `@godxjp/ui/email` export (EMAIL_SHELL), never by a stylesheet."},{name:"--email-{body,heading}-{font-size,line-height,font-weight} / --email-font-family-{sans,mono}",category:"component",tier:"component",role:`Email type ramp, reconciled with the SCR-302 canonical reference. Body 14px/1.9, title 17px/1.7 at weight 500 (a transactional title is CALM, not bold) \u2014 deliberately looser and quieter than the web ramp, because a mail client gives the reader no density control, so do NOT 'fix' it back to --heading-h1/--line-height-body. --email-font-family-sans names the canonical Noto Sans JP face first and degrades Hiragino \u2192 Yu Gothic \u2192 M PLUS 2 \u2192 Meiryo \u2192 system UI \u2192 Arial \u2192 sans-serif; no email client honours @font-face, so the stack is the whole fallback contract. --email-font-family-mono (mirrors --font-family-mono) sets invoice ids, masked card numbers, ISO dates and amounts. Family names export SINGLE-quoted so the value drops into a double-quoted style="\u2026" attribute unescaped (emailInlineStyle throws on a double quote). Exposed as EMAIL_TYPOGRAPHY.`},{name:"--email-mark-{width,height,gap} / --email-wordmark-{font-size,font-weight}",category:"component",tier:"component",role:'Email brand-mark LOCKUP. The ARTWORK is byte-identical to <Logo mark="godx" /> (the 32\xD732 capsule + internal glyph, asserted by test); only the rendered box is email-specific \u2014 the canonical header sets a 22px mark, an 8px gap (mirrors --logo-wordmark-gap) and a 13px/700 wordmark (mirrors --logo-wordmark-font-weight). In that pairing the mark is DECORATIVE (render it with label: "") and the wordmark carries the accessible name, so the brand is announced once. Exposed as EMAIL_BRAND_MARK; the svg / dataUri / tableHtml deliveries all derive from this one geometry source.'},{name:"--email-cta-{height,line-height,padding-x,radius,font-size,font-weight} / --email-focus-border-width",category:"component",tier:"component",role:"The single primary email CTA, reconciled with the SCR-302 canonical reference: 44px tall with line-height EQUAL to the height so the label centres without flexbox in Outlook, 16px inline padding (--space-4), the 6px --radius base, 14px/500 label. The height is a TOUCH TARGET and is deliberately DECOUPLED from --control-height-lg (36px), which it mirrored until 18.8.0 \u2014 do not restore the mirror. Email is touch-only: no hover, no precise pointer, no dependable zoom, so the web AA floor (SC 2.5.8, 24\xD724, which 36px clears) is the wrong bar. 44px is SC 2.5.5 Target Size (Enhanced, AAA, 44\xD744) plus the Apple HIG 44pt / Material 48dp convention, and the mobile reflow still takes the CTA full-bleed. Fill/label are EMAIL_COLORS.primary / primaryForeground, derived from the --primary role \u2014 never paste a canonical hex, or the email stops tracking a re-theme. --email-focus-border-width mirrors --focus-ring-width for the webmail panes that honour :focus-visible. Exposed as EMAIL_CTA / EMAIL_FOCUS."},{name:"--email-footer-{font-size,line-height,link-gap,padding-top,border-width} / --email-mobile-*",category:"component",tier:"component",role:"Legal-footer typography (11px/1.8 quiet type per the SCR-302 canonical, 12px between adjacent links, 20px above the hairline) and the narrow-viewport reflow (520px breakpoint, fluid card, 20px inset, 12px gutter, 16px heading \u2014 one step under the 17px desktop title, full-bleed CTA). The canonical 390px reference raster is unusable (435px wide and already clipping the card, dxs-platform/platform#496), so the mobile ramp is the library's documented contract rather than a measured value. Exposed as EMAIL_FOOTER / EMAIL_MOBILE; every reflow rule needs an inline fallback because most clients strip <style>."},{name:"--auth-shell-device-{card-max-width,main-padding,main-padding-mobile,otp-slot-inline-size,otp-slot-block-size}",category:"component",tier:"component",role:'AuthShell `preset="device-authorization"` measure \u2014 the canonical OAuth device-grant artboard: a 23.75rem/380px card at 1440/1024 and a 15px-block \xB7 5px-inline page gutter at 390 (so the card renders x=5px, width=380px), PLUS the code field the flow is actually about. The preset now owns its OTP slot box and hands it to --otp-slot-{inline,block}-size: 27.5x52 per slot, i.e. a 4-slot `appearance="grouped"` box of 112x54 with its 1px group border. Without it the field fell back to the square --control-height tier and rendered 146x38 against that artboard \u2014 the preset owned the page but not its subject. LITERAL lengths, not --space-*, because the artboard specifies exact device pixels that must not drift with --scaling. Selecting the preset replaces a consumer-side --auth-shell-card-max-width override or a forked `.auth-shell--wide` class; the canonical 360px/15px default is untouched.'},{name:"--auth-shell-context-{card-max-width,main-padding,main-padding-mobile,card-stack-gap}",category:"component",tier:"component",role:'AuthShell `preset="context-selection"` measure \u2014 the organisation/context picker: a 25rem card on desktop/tablet, edge-to-edge on mobile (0 inline gutter), and a 1rem rhythm between the three direct sections of the auth column (intro \xB7 choice card \xB7 "remember" row).'},{name:"--auth-shell-recovery-{card-max-width,main-padding,main-padding-mobile}",category:"component",tier:"component",role:'AuthShell `preset="account-recovery"` measure \u2014 the SCR-008 27rem/432px panel, shared by the password-recovery panel (request \xB7 sent \xB7 new-password \xB7 expired) AND the sign-in MFA challenge panel (OTP \xB7 recovery-code \xB7 passkey-failure), because both canonical desktop panels measure w=432 at 1440. Mobile gutter = 15px inline at <=30rem, so the panel is x=15, width=360 \u2014 the SAME rhythm as the canonical Login flow, chosen deliberately: the supplied 390 reference is a desktop 2x2 composite that crops horizontally and is NOT a valid source. The canonical 360px Login measure and the 24rem un-preset shell are untouched.'},{name:"--auth-shell-registration-{card-max-width,main-padding-block-start,main-padding-block-start-mobile,main-padding-inline,main-padding-inline-mobile,main-padding-block-end,main-padding-block-end-mobile,card-stack-gap,identity-slot-block-size}",category:"component",tier:"component",role:'AuthShell `preset="registration"` measure \u2014 the canonical SCR-002 sign-up flow: a 22.5rem/360px form measure with a 15px inline gutter at 390 (card x=15, width=360 \u2014 the same page rhythm as the Login flow, so sign-in \u2192 sign-up never jumps on a phone). START-aligned (a tall sign-up card must scroll, not clip its own top above the scroll origin), with the block-start offset DERIVED from the canonical artboard (card y=284 at 1440x900, y=274 at 390x844: padding-block-start + 112px identity slot + 20px stack gap), and a footer-clearance knob of its own (block-end 3rem / 2rem mobile) so the legal/consent footer never sits flush against the submit button after a long scroll. The fixed 112px identity track absorbs absent / one-line / wrapped two-line identity copy without moving the card anchor.'},{name:"--otp-slot-size",category:"component",tier:"component",role:"InputOTP slot box. Default `var(--control-height)` \u2014 byte-identical to before and still density-aware \u2014 but its OWN knob, so an auth panel can widen the 6-slot challenge row to fill a wide surface WITHOUT re-scoping --control-height (which would resize the primary button and every other input in the same card). Set it to a NAMED tier (`var(--control-height-lg)`), never an ad-hoc calc offset."},{name:"--otp-slot-{inline-size,block-size}",category:"component",tier:"component",role:'Per-AXIS InputOTP slot box. --otp-slot-size stays the SQUARE shorthand; these two win over it and fall back to it, so a code field that is taller than it is wide \u2014 the canonical device-grant slot, 27.5x52 \u2014 is finally expressible from a token. Declared `initial` so the whole chain (axis \u2192 square \u2192 --control-height) resolves at the CALL SITE and a shell that re-scopes --control-height still reaches a field that sets neither axis. `AuthShell preset="device-authorization"` sets both for you.'},{name:"--otp-container-align",category:"component",tier:"component",role:'Main-axis alignment of the whole InputOTP row. Default `flex-start` = the historical layout, so nothing moves. It exists because a centred code challenge is the common auth case and the container element belongs to `input-otp` \u2014 the only thing a consumer could reach was a wrapper div, and every one of them wrote it. Per instance use `align="center"` on InputOTP, which outranks this token.'},{name:"--tabs-indicator-{background,size,offset}",category:"component",tier:"component",role:"Tabs `line` ACTIVE indicator \u2014 the only selected-state decoration the line variant paints; it never gets a surrounding ring/card border, so the `:focus-visible` keyboard ring stays visible and distinct (WCAG 2.4.7). --tabs-indicator-background is declared `initial` so its hsl(var(--primary)) default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme. Defaults = primary \xB7 2px \xB7 offset 0 (flush with the trigger edge); raise the offset to park the bar on a thicker strip hairline. The selected ring on the default/card variants is unchanged."},{name:"--avatar-square-{radius,size,background,foreground}",category:"component",tier:"component",role:'Avatar `shape="square"` entity-header mark \u2014 the compact rounded square an organization/service header uses instead of the round person avatar. --avatar-square-background / --avatar-square-foreground are declared `initial` so the hsl(var(--primary)) / hsl(var(--primary-foreground)) defaults re-resolve at the CALL SITE under a scoped theme. Defaults = --radius-lg corners \xB7 --control-height box (swapping shape never reflows the header) \xB7 primary fill at 4.65:1 contrast. `shape="circle"` (the default) is inert and reads --avatar-background / --avatar-tint as before.'},{name:"--avatar-tinted-{background,foreground,glyph-size}",category:"component",tier:"component",role:'Avatar `appearance="tinted"` \u2014 the CAPABILITY MEDALLION: the tinted plate a feature/capability glyph sits on, as opposed to the solid entity mark above. Orthogonal to `shape`, so `shape="square" appearance="tinted"` is the canonical rounded square. --avatar-tinted-background / --avatar-tinted-foreground are declared `initial` so the hsl(var(--primary) / 0.1) / hsl(var(--primary)) defaults re-resolve at the CALL SITE under a scoped [data-tenant]/.dark theme \u2014 which is the whole point: consumers were writing that 0.1 alpha literal into page CSS, or giving up and rendering a bare glyph, because the medallion is a composition (Avatar + a Lucide glyph) whose tint had no token. Defaults = 10% primary wash \xB7 primary glyph \xB7 --control-icon-size glyph box.'},{name:"--avatar-presence-{size,min-size,inset,ring-width,ring-color,stroke-width,bar-inline-size,bar-block-size,online-color,away-color,busy-color,offline-color}",category:"component",tier:"component",role:'Avatar `presence` \u2014 the realtime reachability dot on the mark. Every constant is a knob because the workaround it replaces baked four of them plus a raw palette colour into consumer page CSS (`-end-0.5 -bottom-0.5 size-2.5 ring-2 bg-green-500`). --avatar-presence-size is a PROPORTION of the mark (default 30%, floored by --avatar-presence-min-size = --space-2), NOT a px step, so one value tracks every avatar the system paints \u2014 the --control-height box and its xs/sm/lg steps, --avatar-square-size, --org-switcher-avatar-size, --upload-avatar-size, a call site\'s own `size-12`, the 36px ListRow density="compact" mark \u2014 instead of freezing a diameter that is a boulder on a 24px mark and a speck on a 96px one. --avatar-presence-ring-color and the four state colours are ROLE-MIRROR knobs declared `initial`, with the role default at the CALL SITE (`var(--knob, var(--role))`), so a scoped [data-tenant]/.dark override of --background / --success / --warning / --destructive / --muted-foreground reaches them \u2014 bound at :root the ring would freeze light-mode-white on a dark avatar. --avatar-presence-stroke-width and --avatar-presence-bar-* are part of the ACCESSIBLE encoding, not decoration: they draw the per-state silhouette (filled / half-filled / barred / hollow) that keeps presence off colour-alone (WCAG 1.4.1) in greyscale, for a deuteranope and under forced colors. Defaults = 30% diameter (floor 0.5rem) \xB7 flush with the corner (inset 0) \xB7 a 2px --background separator ring \xB7 a 1.5px state stroke \xB7 a 56%-wide 1.5px dnd bar.'},{name:"--separator-{rule-size,rule-color,label-gap,label-inset,label-font-size,label-line-height,label-font-weight,label-color,tone-<tone>-rule-color,tone-<tone>-label-color}",category:"component",tier:"component",role:"Separator, including the LABELLED rule a `label` interrupts \u2014 a message stream's day divider, a \"new messages\" unread watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, which baked `height: 1px` into shell-layout.css and read the `--auth-shell-divider-*` micro-scale, so a service retuning its login divider silently retuned every day divider in its chat. Defaults are the QUIETEST state: a 1px hairline, a muted --font-size-xs label at --font-weight-medium, no surrounding padding. --separator-label-gap and --separator-label-inset (the SHORT rule half under labelAlign start/end \u2014 a grid track on the inline axis, so it flips under RTL) are declared `initial` because --space-* is density-scaled and re-declared inside a `.ui-density-*` subtree; a :root binding would freeze them at the :root density. Every colour knob is a role-mirror and is likewise `initial`, with the role default at the CALL SITE \u2014 --separator-rule-color \u2192 --border, --separator-label-color \u2192 --muted-foreground, and --separator-tone-{muted,primary,success,warning,destructive,info}-{rule,label}-color \u2192 the matching semantic role. `tone` re-points the rule AND the label, never the rule alone, so an attention rule is not colour-only (WCAG 1.4.1) and survives forced-colors. AuthDivider now only re-points these knobs at the --auth-shell-divider-* layer, so #263's canonical login geometry is unchanged."},{name:"--steps-inline-{gap,item-gap,font-size,separator-size,index-font-weight,index-color,separator-color}",category:"component",tier:"component",role:"Steps type=inline compact auth/device progress rhythm, typography and EMPHASIS. Consumers select the semantic appearance; services retune the row once without page CSS. The step number's emphasis is two knobs \u2014 --steps-inline-index-font-weight (default bold) and --steps-inline-index-color (role-mirror `initial`, default the inherited step colour) \u2014 because the canonical hosted-identity row marks the step with an accent TINT at normal weight while the library default marks it with bold. --steps-inline-separator-color (role-mirror `initial`, default --muted-foreground) tints the glyph the `separator` prop picks."},{name:"--auth-account-summary-{min-height,gap,padding,identity-min-width,avatar-size,avatar-glyph-size,email-font-size}",category:"component",tier:"component",role:"AuthAccountSummary compact signed-in identity row: wrapping threshold, avatar, email and action rhythm. The default touch-safe row is package-owned and remains themeable without consumer selectors."},{name:"--auth-shell-{main-align,card-stack-gap}",category:"component",tier:"component",role:"AuthShell column knobs shared by every preset. --auth-shell-main-align is the block alignment of the auth column (default `center`, the vertically-centred card; set `start` for a tall intro+card+footnote stack). --auth-shell-card-stack-gap is the gap between the card slot's direct sections \u2014 default `0px` (quiet, rule #44) so an existing single-card consumer is byte-for-byte unchanged; a preset opts in."},{name:"--card-{accent-rail-width,accent-perimeter-width,accent-perimeter-ring-width,featured-border-color,featured-ring-width}",category:"component",tier:"component",role:'Card ACCENT geometry, one set per placement. `accentPlacement="edge"` (the default) draws the leading rail at --card-accent-rail-width (6px). `accentPlacement="perimeter"` draws the FULL attention border, measured by --card-accent-perimeter-width + --card-accent-perimeter-ring-width (1px + 1px, the optical weight of `variant="featured"`) in the card\'s own semantic accent tone. `variant="featured"` is the brand-toned member of the same family and no longer hard-codes --primary: its edge is the --card-featured-border-color role-mirror knob (`initial`, so the --primary default resolves at the CALL SITE and a scoped [data-tenant]/.dark override reaches it) at --card-featured-ring-width. The accent COLOUR itself is not a knob \u2014 it is resolved from `data-accent` on the card, so retint the ROLE (--attention, --success \u2026).'},{name:"--card-space-shell-y",category:"component",tier:"component",role:"Card BLOCK-axis shell padding \u2014 a plain header's top, a `solo` body's top and the terminal slot's bottom. Split off --card-space-inset, which is now inline-only, so a theme can make a card SHORTER without narrowing its column. Declared `initial`: the default resolves at the CALL SITE to --card-space-inset, so a card that overrides neither (and `density=\"tight|cozy\"`, which re-declares it `initial` to re-arm the per-instance inset) renders exactly as before."},{name:"--auth-shell-{compact-card-inset,card-padding-block-compact,card-body-gap-compact,card-gap-compact}",category:"component",tier:"component",role:"The compact AuthShell card's four independent knobs \u2014 one per axis, so the canonical Login card is tunable WITHOUT a consumer selector on the card-content slot: `compact-card-inset` = the inline column (\u2192 --card-space-inset); `card-padding-block-compact` = the card's block/top-bottom padding (\u2192 --card-space-shell-y, `initial` so its default mirrors the live inline inset and canonical output is unchanged); `card-body-gap-compact` = the header\u2194body gap (\u2192 --card-space-body-y, 12px, the role the block knob used to be mis-wired to); `card-gap-compact` = the in-slot title\u2195description stack gap (\u2192 --card-space-gap)."},{name:"--app-setting-picker-compact-{control-height,padding-x,gap,font-size}",category:"component",tier:"component",role:'AppSettingPicker `compact` trigger \u2014 the small, content-hugging LABELLED switcher for an auth/legal footer (`kind="locale" appearance="labeled" compact`). The box height reads the official --control-height-sm tier (never a literal or an ad-hoc calc), and padding/gap/type are separate knobs so a service theme retunes the footer switcher without forking CSS.'},{name:"--centered-shell-column-offset-block",category:"component",tier:"component",role:'CenteredShell column block offset \u2014 default `0` (the quiet state, rule #44: the top-aligned flowing/scrolling page). `<CenteredShell align="center">` flips it to `auto`, which centres the column in the 100dvh shell: the package-owned geometry for a SYSTEM-level standalone surface (a 500/503 error page, a maintenance notice) at 1440/1024/390, so a consumer never writes `min-h-dvh` + flex-centring CSS or a className. Auto block offsets collapse to 0 when the content is taller than the viewport, so a long localized message scrolls from the top instead of clipping.'},{name:"--error-surface-*",category:"component",tier:"component",role:'ErrorSurface knobs \u2014 the whole 403/404/500/503 exception surface is themeable without a single consumer class or media query, in BOTH `mode="application"` and `mode="system"`. Geometry: `--error-surface-max-width` (32rem measure of the surface block, so a long JA/VI headline wraps readably even inside a wide PageContainer), `--error-surface-gap` (rhythm between status code \xB7 body \xB7 metadata \xB7 progress), `--error-surface-padding-block` (--space-10, the 1440/1024 steps) and `--error-surface-padding-block-compact` (--space-6, below the narrow step, i.e. the 390 case), `--error-surface-brand-gap` (system-mode Logo slot) and `--error-surface-progress-max-width` (18rem, so the maintenance meter reads as metadata, not as the page\'s primary content). Metadata list: `--error-surface-meta-gap` (row rhythm) \xB7 `--error-surface-meta-row-gap` (label\u2194value gap inside one row) \xB7 `--error-surface-meta-padding-block`. Chrome is QUIET by default (rule #44): `--error-surface-meta-border` is `none`; a service opts in with `1px solid hsl(var(--border))`. The narrow step is a CONTAINER query at 30rem on the SURFACE\'s own width, not a viewport media query, so it compacts correctly whether the squeeze came from a 390px phone or from an application shell with an expanded sidebar; below it, metadata rows stack label-over-value. System-mode viewport centring is delegated to `--centered-shell-column-offset-block` (via CenteredShell align="center"), and the description measure to `--empty-state-description-max-width`.'},{name:"--centered-shell-landing-*",category:"component",tier:"component",role:'CenteredShell public-landing knobs \u2014 the SHELL geometry of a public marketing/product landing, so the landing itself stays a COMPOSITION (Hero/Navbar/Footer fail the Framework-Component Test) with ZERO page-local CSS. Read only under `preset="public-landing"`; the default shell emits no `data-preset`, so none of them can match. Measure: `--centered-shell-landing-max-width` (67.5rem, shared by the header bar, the centred column AND the footer \u2014 the bar/footer inline padding is `max(gutter, (100% - measure) / 2)`, so header content starts on exactly the column edge and no consumer max-width wrapper exists), `--centered-shell-landing-inset-inline` (+ `-compact`, the 390 gutter), `--centered-shell-landing-main-padding-block` (+ `-compact`), `--centered-shell-landing-section-gap` (+ `-compact`, the rhythm BETWEEN plain `<section>` elements \u2014 the consumer never sets a gap) and `--centered-shell-landing-footer-padding-block`. Chrome is QUIET by default (rule #44): `--centered-shell-landing-card-shadow` is `none`, which flattens every Card in the subtree from ONE knob instead of a consumer `.landing .card { box-shadow: none }`. Type: `--centered-shell-landing-heading-size` (+ `-compact`) re-points `--heading-h1`, so a hero title is a real `Heading level={1}` and never a page font-size. `--centered-shell-landing-background` is a ROLE-MIRROR declared `initial` with the role default at the call site (`var(--centered-shell-landing-background, var(--background))`), so a scoped [data-tenant]/.dark override of `--background` still reaches the landing canvas. The compact step is a 40rem media query owned by the package; region visibility (anchor nav below the tablet step, wordmark and the secondary action at mobile) is `Flex hideBelow` / `hideFrom`, never a consumer @media.'},{name:"--table-action-collection-*",category:"component",tier:"component",role:'Table action-collection knobs \u2014 the canonical dense approval/action queue at 1440 \xB7 1024 \xB7 390. Read only under `preset="action-collection"`. Column PRIORITY measures replace the desktop intrinsic widths (a `white-space: nowrap` free-text column is what makes a five-column queue wider than its card and forces the horizontal scroll): `--table-action-collection-primary-width` (18%), `-secondary-width` (22%), `-meta-width` (12%) and `-actions-width` (3.5rem \u2014 an absolute measure because the row-action affordance must never be squeezed below its touch target); an unmarked column takes the remaining space. Below the collapse step the same four re-point to their `-compact` tier (24% / 22% / 20% / 2.75rem) together with `--table-action-collection-font-size-compact`, `-row-height-compact`, `-cell-space-x-compact` and `-cell-padding-y-compact`. The step is a CONTAINER query on the table\'s own width (sm 40rem \xB7 md 48rem \xB7 lg 64rem \xB7 xl 80rem via `collapseBelow`), not a viewport media query, so a table inside a master rail collapses before the page does. Percentages so the ratio holds at any card width; a service retunes the ratio once instead of authoring column widths per screen (rule #45). ONE family serves BOTH entry points \u2014 the `Table` primitive (`priority` on `TableHead`/`TableCell`) and the TanStack `DataTable` (`priority` on the `ColumnDef`, stamped onto both cells for you). There is deliberately no parallel `--data-table-action-collection-*` family: retune these once and every queue follows.'},{name:"--legal-document-*",category:"component",tier:"component",role:"LegalDocumentShell knobs \u2014 the whole legal/policy document surface is themeable without a single consumer `.legal-*` class. Geometry: `--legal-document-measure-max-width` (46rem readable measure, caps header/body/footer), `--legal-document-toc-width` \xB7 `--legal-document-column-gap` \xB7 `--legal-document-toc-inset-block-start` (sticky offset) \xB7 `--legal-document-toc-max-height`, `--legal-document-section-gap` \xB7 `--legal-document-section-title-gap` \xB7 `--legal-document-header-gap` \xB7 `--legal-document-meta-gap` \xB7 `--legal-document-nav-gap` \xB7 `--legal-document-footer-gap`, `--legal-document-meta-font-size`, `--legal-document-body-line-height` (1.8 long-form leading) and `--legal-document-scroll-offset` (the `scroll-margin-block-start` a hash jump leaves above a heading \u2014 this is why no app needs JS offset arithmetic). Contents entries: `--legal-document-toc-font-size` \xB7 `--legal-document-toc-title-font-size` \xB7 `--legal-document-toc-item-padding` \xB7 `--legal-document-toc-item-radius` \xB7 `--legal-document-toc-marker-width`. Chrome is QUIET by default (rule #44): `--legal-document-toc-border` / `--legal-document-header-border` / `--legal-document-footer-border` are all `none`; a service opts in with `1px solid hsl(var(--border))`. The six colour knobs are ROLE-MIRRORS declared `initial` with the role default at the call site \u2014 `--legal-document-toc-foreground` (\u2192 --muted-foreground, also paints the contents caption), `--legal-document-toc-active-foreground` (\u2192 --foreground), `--legal-document-toc-active-background` (\u2192 --accent), `--legal-document-toc-marker-color` (\u2192 --primary), `--legal-document-meta-foreground` (\u2192 --muted-foreground) and `--legal-document-summary-foreground` (\u2192 --muted-foreground) \u2014 so a scoped [data-tenant]/.dark override of the role still reaches them. The one-column \u21C4 two-column split is a CONTAINER query at 56rem on the shell's own width, not a viewport media query."},{name:"--empty-state-description-max-width",category:"component",tier:"component",role:"EmptyState description MEASURE \u2014 default 28rem (~65 Latin characters per line). A service or locale that needs a shorter/longer measure for its own copy (JA/VI error-page descriptions, a narrow system surface) retunes this one knob instead of forking `.ui-empty-state-description` (rule #45)."},{name:"--sidebar-badge-{background,foreground} / --sidebar-badge-destructive-{background,foreground}",category:"component",tier:"component",role:'Sidebar nav COUNT PILL colour, split into a resting pair and an emphasis pair. Before these knobs `.sb-badge` had a font-size token and no colour token at all, so a rail that had to tell "unread" from "mentions you" could only nest a `<Badge>` INSIDE `SidebarItemProp.badge` \u2014 which renders a pill inside a pill (measured: a 37.11x19.14 `.sb-badge` wrapping a 25.11x19.14 `<Badge>` with its own border). The resting pair is what every badge has always looked like (hsl(var(--secondary)) fill, hsl(var(--muted-foreground)) text); the `-destructive-` pair is read ONLY by rows that pass `badgeTone="destructive"`, which is the only thing that emits `data-tone` on the pill (rule #44), so a rail that never sets the prop renders exactly the node it always did. All four are role-mirror knobs declared `initial` with the role default resolved at the call site, so a scoped [data-tenant]/.dark override reaches them. Colour ONLY \u2014 the pill\'s min-width, radius, inline pad and font size are shared by both tones, which is what keeps a mention row and an unread row aligned in the same column.'},{name:"--sidebar-nav-item-{foreground,hover-foreground,disabled-foreground} / --sidebar-nav-icon-{foreground,hover-foreground,active-foreground,disabled-foreground}",category:"component",tier:"component",role:"Sidebar navigation row + icon COLOUR, split so they can differ. Previously `.sb-nav-item` set one `color` for the whole row, so the Lucide SVG inherited `--muted-foreground` along with the label and the icons read as 'missing' against a canonical shell that wants darker 16px icons. `--sidebar-nav-item-*` drives the row/label (incl. sub rows), `--sidebar-nav-icon-*` drives `.sb-icon`. All are role-mirror knobs declared `initial` at `:root` with the role default at the call site, so a scoped `[data-tenant]`/`.dark` override reaches them; icon defaults resolve to `currentColor`, i.e. rendering is unchanged until a service opts in (`--sidebar-nav-icon-foreground: hsl(var(--foreground))` is the canonical darker-icon setting). Colour ONLY \u2014 the 16px icon, 32px row height and 10px gap are untouched. The ACTIVE row is its own group, `--sidebar-item-active-*`. Note the interaction with that group since gh#651: the active row's label is now `hsl(var(--primary))`, and `--sidebar-nav-icon-active-foreground` still falls back to `--sidebar-nav-icon-foreground` and only then to `currentColor` \u2014 so an untouched sidebar gets a primary active ICON for free (it inherits the row), while a service that set the base icon knob keeps ITS colour on the active row and must set `--sidebar-nav-icon-active-foreground: hsl(var(--primary))` if it wants the icon to follow the label."},{name:"--sidebar-item-active-{background,foreground,tint,background-alpha}",category:"component",tier:"component",role:'Sidebar OPEN-ROW colour, one language for both nav depths (gh#651). Before this, the two levels of one nav column signalled the same meaning two ways: `.sb-nav-item[data-active="true"]` painted a neutral `hsl(var(--accent))` fill with an `hsl(var(--foreground))` label, while `.sb-nav-item--sub[data-active="true"]` painted `hsl(var(--primary))` \u2014 the open CHILD looked branded and its open PARENT looked grey. Defaults now: `--sidebar-item-active-background` = `--primary` composited at `--sidebar-item-active-background-alpha` (12%) over whatever the nav sits on, `--sidebar-item-active-foreground` = `hsl(var(--primary))` at BOTH depths, `--sidebar-item-active-tint` = `hsl(var(--primary))` for the level-2 dot. A DEFAULT change, not a hardcode \u2014 every knob still overrides, and a service that wants the grey back writes one declaration. RENAMED: the level-2 label knob was `--sidebar-item-active-color`; it is gone with no alias (it had zero consumers outside its single call site, and keeping both names would preserve the very ambiguity being removed). `--sidebar-item-active-background-alpha` HAS A CEILING OF 16%: the label rides on the fill, so raising the alpha walks the two together and contrast falls monotonically \u2014 measured on the v2.3 violet, 12% is 5.07:1 light / 7.51:1 dark on the sidebar\'s `--card` (8.30:1 where the nav sits on `--background`), 16% is 4.69:1 light, 18% is the last step still clearing WCAG 2.2 SC 1.4.3, 19% is 4.42:1 and fails. 16% is the cap because a nav moved onto `hsl(var(--muted))` only has 13%. Pinned by src/tokens/__tests__/sidebar-active-contrast.test.ts.'},{name:"--list-row-compact-{padding-y,padding-x,gap,body-min-width}",category:"component",tier:"component",role:'ListRow `density="compact"` inline-actions geometry \u2014 the compact invitation/history row: a 36px leading Avatar, a shrinkable title+description and one or two small trailing Buttons on ONE line inside the canonical 358px card (326px content). `--list-row-compact-body-min-width` (6rem) is the compact body threshold \u2014 the default 12rem `--list-row-body-min-width` is what forced the actions (and a history Badge + date) onto a second line at 390px; it is consumed as `min(<token>, 100%)` exactly like the default knob, so the #224 wrap contract is intact and a cluster that genuinely cannot fit still wraps instead of widening the page root. `--list-row-compact-{padding-y,padding-x,gap}` are declared `initial` with the density-scaled default at the CALL SITE (`var(--space-2)` block, `var(--list-row-padding-x)` inline, `var(--space-2)` gap) \u2014 a `:root` binding would freeze compact rows at the `:root` density. Measured at 390px: invitation row 62px (was 126px, actions wrapped), history row 41px (was 114px), documentElement scrollWidth === clientWidth.'},{name:"--list-row-{body-min-width,trailing-gap,indicator-size,read-background,unread-background,indicator-color}",category:"component",tier:"component",role:"ListRow shrink + unread state. `--list-row-body-min-width` (12rem) is consumed as `min(<token>, 100%)` \u2014 the `min()` is load-bearing, a bare length re-inflates the row's intrinsic width and reintroduces page-root overflow. `--list-row-trailing-gap` spaces wrapped trailing actions. The unread trio are role-mirror knobs declared `initial` with the role at the call site: `--list-row-unread-background` defaults to `hsl(var(--muted))` NOT `--accent` \u2014 accent measured 4.23:1 against the xs muted-foreground description line, below WCAG AA; muted is 4.63:1 light / 5.47:1 dark. `--list-row-indicator-color` (\u2192 `--primary`) and `--list-row-indicator-size` drive the unread dot, whose meaning is carried by localized sr-only text, never by colour alone."},{name:"--filter-bar-scroll-padding-y",category:"component",tier:"component",role:'Scrollbar gutter for `<FilterBar overflow="scroll">`, default `var(--space-1)`. Only applies at \u2265640px, where a wide filter set becomes a single nowrap strip with a sticky inline-end clear-all; below that the bar still stacks, so the gutter would be dead space. Pair with the existing `--filter-bar-sticky-background` (already an `initial` role-mirror knob) when theming the strip.'},{name:"--filter-bar-{search-width,filter-width,chip-gap,section-gap}",category:"component",tier:"component",role:"FilterBar typed-model geometry \u2014 every list page gets the SAME search width, filter width, chip rhythm and section stacking without page-local CSS (rule #45: theme sets once, className overrides per instance). `--filter-bar-search-width` (20rem) sizes the model search slot; `--filter-bar-filter-width` (\u2192 `--filter-picker-width-md`) is the min inline size of each typed filter group; both apply from 640px up, consumed as `min(100%, <token>)` so a 390px viewport never overflows with long JA/EN/VI labels (below 640px everything stacks full-width). `--filter-bar-chip-gap` (`--space-2`) spaces the applied-chips row; `--filter-bar-section-gap` (`--space-2`) stacks strip \u2192 chips \u2192 result-count/error line."},{name:"--app-shell-{sidebar-width,rail-width}",category:"component",tier:"component",role:"AppShell docked navigation TRACK widths. `--app-shell-sidebar-width` (default 16rem) is the sidebar expanded; `--app-shell-sidebar-collapsed-width` (default 4rem) is the SAME track at `<AppShell sidebarCollapsed>`; `--app-shell-nav-rail-width` (default 4rem) is a SECOND, separate track that exists only when the `navRail` slot is filled. These were hard-coded `grid-template-columns` literals; a service on a different design grid (e.g. a 255px sidebar) now sets ONE token in its theme instead of forking `.app-root`. Below the 900px shell breakpoint every track collapses to a single full-width column and both navigation columns move into AppShell's drawer. NOTE for anyone reading 19.x code or themes: the collapsed-sidebar token shipped as `--app-shell-rail-width` through 19.x and was renamed in 20.0.0 with NO alias, because it collided with the real rail added in the same release \u2014 two tokens, both 4rem, both spelled 'rail', meaning different things."},{name:"--app-shell-bar-{inset,inset-compact,gap}",category:"component",tier:"component",role:"AppShell top-bar chrome \u2014 `--app-shell-bar-inset` is the bar's inline padding, `--app-shell-bar-inset-compact` the tighter value below the compact step, `--app-shell-bar-gap` the gap between the bar's direct children (default --space-3). ONE OWNER FOR THE HORIZONTAL PAGE-INSET AXIS: the bar sits in the SAME grid track as `.app-main`, directly above the page, so its first control and the page title are on one vertical edge. The two insets used to name their own values (--space-4 / --space-3) while the page named --space-page-x / --space-page-compact-x, and nothing reconciled them \u2014 measured in Chromium, the bar's content started at x=80 and the page header's at x=88 (1512px), and because the two sides stepped at DIFFERENT breakpoints (shell 900px, page 720px) the error was not even constant (8px at 1512, 12px between 720 and 900, 4px below 720), which a consumer cannot correct by hand. The page gutter now OWNS the axis and these knobs read it: `--app-shell-bar-inset: var(--space-page-x)` (24px), `--app-shell-bar-inset-compact: var(--space-page-compact-x)` (16px), stepping at the PAGE's `(max-width: 720px)`, not the shell's 900px restructure. GEOMETRY MOVED \u2014 the bar's inline padding went 16px \u2192 24px (12px \u2192 16px compact, and 12px \u2192 24px between 720 and 900); the page did not move. The NAMES are unchanged, so a theme that already sets either knob keeps working, and a bar that genuinely wants to sit tighter than its page still has its own. Height stays `--app-shell-bar-height` (3rem) at EVERY width, and it is also the owner of the chrome BAND-HEIGHT axis \u2014 see `--page-header-min-block-size-chrome`."},{name:"--topbar-{height,inset,gap}",category:"component",tier:"component",role:"Standalone `<Topbar>` box knobs. Topbar is a pure slot bar, so the defaults are the QUIET ones and rendering is unchanged from before they existed: `--topbar-height: auto` and `--topbar-inset: 0px` (inside AppShell the `.app-topbar` grid row owns height and inset), `--topbar-gap: var(--space-2)`. A service that mounts Topbar DIRECTLY on a page sizes it from the theme (`--topbar-height: 3.5rem; --topbar-inset: var(--space-4)`) instead of an app-local class. `--topbar-gap` is both the gap BETWEEN the start/center/end clusters and the gap INSIDE each, so one knob re-rhythms the whole bar. None of them touch the shrink contract (start clips, center yields first, end stays anchored inline-end)."},{name:"--{dialog,sheet}-overlay-background / --app-shell-mobile-nav-background (+ -alpha)",category:"component",tier:"component",role:"Overlay scrims. All three are ROLE-MIRROR knobs declared `initial` at `:root`, with the default resolved at the CALL SITE as a SHARE of the one semantic `--overlay-background` \u2014 `color-mix(in srgb, var(--overlay-background) var(--<x>-overlay-alpha), transparent)`. Previously each carried a private literal, so setting `--overlay-background` had NO effect anywhere. The share knobs (`--dialog-overlay-alpha` 60%, `--sheet-overlay-alpha` 40%, `--app-shell-mobile-nav-alpha` 40%) keep every default byte-identical (0.3 / 0.2 / 0.2 black) while letting one `--overlay-background` override retint the whole system, including scoped `[data-tenant]` / `.dark` themes. Setting a `*-overlay-background` knob directly still wins outright. NOTE: overlays render in a portal, so a multi-tenant scope must also sit on the portal container."}];function I(e){return C.filter(t=>t.category===e)}var $=[{name:"--actions-gap",value:"var(--space-1)",description:"Gap between actions. Tight on purpose \u2014 the strip is a cluster, not a row of page buttons."},{name:"--actions-padding-block",value:"var(--space-1)",description:"Inset of the `filled` / `outlined` forms. `borderless` drops both to zero."},{name:"--actions-padding-inline",value:"var(--space-1)",description:'Actions component tokens \u2014 the strip of actions under an assistant message (Ant Design X `Actions`). Every action is a `Button`, so NOTHING here sets a control height: that comes from the `--control-height` tier through Button\'s own `size="icon-sm"` step, and restating it would re-derive a tier that drifts from the buttons beside it (`pnpm check:control-sizing`).'},{name:"--actions-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--actions-filled-background",value:"initial",description:"Chrome of the two bounded variants. Role-mirror knobs (docs/TOKENS.md): `initial` so each documented default resolves at the CALL SITE. Default filled ground = hsl(var(--muted)) Default outlined stroke = var(--stroke-hairline) solid hsl(var(--border))"},{name:"--actions-outlined-border",value:"initial",description:'Actions component tokens \u2014 the strip of actions under an assistant message (Ant Design X `Actions`). Every action is a `Button`, so NOTHING here sets a control height: that comes from the `--control-height` tier through Button\'s own `size="icon-sm"` step, and restating it would re-derive a tier that drifts from the buttons beside it (`pnpm check:control-sizing`).'},{name:"--actions-fade-offset-inline",value:"var(--space-2)",description:"`fadeIn` / `fadeInLeft` \u2014 the distance the strip travels along the inline axis. The DURATION is deliberately not a knob here. Timing belongs to the motion tier, for the same reason `src/tokens/components/activity.css` records: `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration, and a service retunes arrival motion once through `--duration-base` rather than per component. The animation reads that token directly, and drops to nothing under `prefers-reduced-motion`."},{name:"--activity-mark-size",value:"0.25em",description:"Mark geometry. `em`-based so the whole mark tracks `--activity-font-size-*` (and therefore `--font-size-base` and the density axis) instead of pinning a px diameter per size step."},{name:"--activity-mark-offset",value:"0.25em",description:"Travel of one `dots` step \u2014 the loop counterpart to `--reveal-distance`, named to match. It is ALSO the height the mark row reserves, so the indicator appearing under a composer never shifts the row."},{name:"--activity-mark-rest-alpha",value:"0.35",description:"Resting opacity of a dot at the bottom of its cycle. Never 0: a dot that vanishes reads as a rendering bug at the trough, and the reduced-motion resting state must stay fully legible."},{name:"--activity-pulse-mark-size",value:"0.5em",description:"The single `pulse` mark \u2014 a breathing dot (live / recording), bigger than one `dots` dot because it carries the whole affordance alone."},{name:"--activity-gap",value:"var(--space-1)",description:"Mark-to-mark and mark-to-label gap."},{name:"--activity-font-size-xs",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Root size ladder \u2014 the mark is `em`-based, so this ONE value scales the whole indicator. Steps mirror the `Text` size the label is rendered at, so mark and label stay optically paired (`--font-size-sm` IS `--font-size-base`; the ladder skips the alias)."},{name:"--activity-font-size-sm",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-font-size-md",value:"var(--font-size-sm, var(--font-size-base))",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-font-size-lg",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-bar-width",value:"4rem",description:"Indeterminate `bar` (syncing). Width is an inline measure, not a fill: the bar sits beside a label in a row, so `100%` would eat the label's space."},{name:"--activity-bar-radius",value:"var(--radius-pill)",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-bar-segment-width",value:"40%",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-bar-track-alpha",value:"0.2",description:"ACTIVITY \u2014 the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha \u2014 everything the shape rule DOES cover \u2014 live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel."},{name:"--activity-bar-height",value:"0.25em",description:"scale-exempt: an em thickness that must track the label beside it, not a fixed band step"},{name:"--activity-color",value:"initial",description:'Mark colour. ROLE-MIRROR KNOB \u21D2 declared `initial` here with the role default at the CALL SITE (`hsl(var(--activity-color, var(--muted-foreground)))` in styles/motion.css). Written as `--activity-color: var(--muted-foreground)` it would freeze at the `:root` role value and a scoped `[data-tenant]` / `.dark` override of `--muted-foreground` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`". Documented default: --activity-color = var(--muted-foreground) (tone="muted").'},{name:"--affix-inset-block-start",value:"0px",description:"Distance from the scrollport's BLOCK-START edge at which an Affix pins, and the distance it sits at once pinned. Ant Design `offsetTop`, whose default is `0`; ported as that default."},{name:"--affix-inset-block-end",value:"0px",description:"The same, from the BLOCK-END edge \u2014 the sticky form footer rather than the sticky header. Ant Design `offsetBottom` has no default at all, because in antd the PRESENCE of the prop is what selects bottom pinning. That selection is still the prop's here; this is only the length it pins at."},{name:"--anchor-ink-width",value:"2px",description:"Thickness of the ink rail \u2014 its inline size in a vertical anchor, its block size in a horizontal one. A hairline by default, matching the list's own leading rule."},{name:"--anchor-ink-color",value:"initial",description:"Paint of the ink rail, and of the active row's label. `initial` + a call-site fallback, NOT `var(--primary)` here, because `--primary` is exactly the role a tenant re-scopes: a `[data-tenant] { --primary: \u2026 }` would override the role and never reach a knob that had already frozen against `:root`'s copy of it, so the rail would keep the default brand's colour under the tenant's. docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\", and src/tokens/__tests__/tenant-scope-freeze-687.test.ts is the guard. Documented default: `hsl(var(--primary))`."},{name:"--anchor-track-color",value:"initial",description:"Paint of the rail's TRACK \u2014 the full-length rule the ink slides along. Same freeze rule, same shape. Documented default: `hsl(var(--border))`."},{name:"--anchor-item-padding-block",value:"var(--space-1)",description:"Vertical rhythm of one row: the block padding above and below a label. The row's HEIGHT is this plus the label's own line box, deliberately \u2014 an anchor row is a line of running text, not a control, so it must not be pinned to the `--control-height` tier (which is also re-scoped by AuthShell, and would freeze if mirrored)."},{name:"--anchor-item-padding-inline",value:"var(--space-3)",description:"Inline distance from the rail to the label."},{name:"--anchor-nested-padding-inline",value:"var(--space-4)",description:"Extra inline indent applied to a NESTED row \u2014 antd's one level of `items[].children`."},{name:"--anchor-gap",value:"var(--space-inline-lg)",description:"Gap between rows on the HORIZONTAL axis. The vertical axis has none: its rows sit flush so the ink rail reads as one continuous rule."},{name:"--attachments-gap",value:"var(--space-2)",description:"Gap between cards in the list. Ant X: `marginXS` = 8px."},{name:"--attachments-card-size",value:"16.75rem",description:"THE CARD BOX. Ant X's file card is a fixed 268x68 chip: wide enough for a name plus one line of description, short enough that a row of them reads as a tray and not as a list. Both axes are fixed there and fixed here \u2014 the block size is what the `+` tile and the `scrollY` one-row viewport are measured against, so it has three readers, not one. Ant X `width: 268`"},{name:"--attachments-card-block-size",value:"4.25rem",description:"Ant X `cardHeight` = 14 * 1.5714 * 2 + 12 + 12 = 68"},{name:"--attachments-card-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; `initial`, default = var(--radius). Ant X `token.borderRadius` = 6 \u2261 --radius"},{name:"--attachments-card-gap",value:"var(--space-3)",description:"Ant X `marginSM` \u2014 glyph to name"},{name:"--attachments-placeholder-space-inset",value:"var(--space-4)",description:"THE PLACEHOLDER \u2014 the whole control while the list is empty, and the drop target. Ant X `token.padding` = 16"},{name:"--attachments-placeholder-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; `initial`, default = var(--radius). Ant X `token.borderRadius` = 6 \u2261 --radius"},{name:"--attachments-placeholder-icon-size",value:"var(--icon-size-3xl)",description:"Ant X's placeholder mark is `fontSizeHeading2` = 30px, which is not a step of this repo's nine-value icon scale (gh#326) and whose neighbours are 24 and 36. It stays on the step the frozen table in `src/tokens/__tests__/icon-size-scale.test.ts` already records for it \u2014 the same mark Upload's dropzone draws, which is the surface a reader meets this one beside."},{name:"--attachments-placeholder-title-font-size",value:"var(--font-size-base)",description:"Attachments \u2014 Ant Design X chat-surface file collection. Ant X retunes this through `styles={{ list, placeholder, upload, \u2026 }}`. Here every length and tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not always so: all twelve of these resolved, were generated into the MCP catalog, were described to every consumer \u2014 and nothing anywhere read one of them, because the component had no stylesheet at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences."},{name:"--attachments-placeholder-description-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Attachments \u2014 Ant Design X chat-surface file collection. Ant X retunes this through `styles={{ list, placeholder, upload, \u2026 }}`. Here every length and tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not always so: all twelve of these resolved, were generated into the MCP catalog, were described to every consumer \u2014 and nothing anywhere read one of them, because the component had no stylesheet at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences."},{name:"--attachments-placeholder-gap",value:"var(--space-1)",description:"Attachments \u2014 Ant Design X chat-surface file collection. Ant X retunes this through `styles={{ list, placeholder, upload, \u2026 }}`. Here every length and tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not always so: all twelve of these resolved, were generated into the MCP catalog, were described to every consumer \u2014 and nothing anywhere read one of them, because the component had no stylesheet at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences."},{name:"--attachments-drop-overlay-background",value:"initial",description:"The scrim the drop layer paints over the whole control while a file is dragged across it. Role-mirror knob, so `initial` and the role resolved at the CALL SITE (docs/TOKENS.md) \u2014 a `[data-tenant]`/`.dark` scope that re-seeds `--background` must reach this. Documented default = `color-mix(in srgb, hsl(var(--background)) 85%, transparent)`, which is Ant X's `colorBgPlaceholderHover` (`colorBgContainer` at alpha .85)."},{name:"--attachments-remove-icon-size",value:"var(--upload-remove-icon-size)",description:"The \u2715 at the end of a card's row. Ant X draws it at `fontSizeLG` = 16; it stays at the 14px step the frozen icon table records, which is also `--upload-remove-icon-size`. Two remove affordances in one group drawing two different sizes is the defect, not the saving."},{name:"--badge-space-gap",value:"var(--space-inline-xs)",description:"Badge component tokens."},{name:"--badge-space-x",value:"var(--space-2)",description:"Badge component tokens."},{name:"--badge-space-y",value:"var(--space-1)",description:"Badge component tokens."},{name:"--badge-radius",value:"initial",description:"Corner of the chip (gh#404). Default = the historical literal `--radius-md`, so nothing moves; it exists so a NESTING context can restate it through the cascade (a Badge inside a bordered Button squares down to --radius-sm) and a call site can restate it back. gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--badge-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Badge component tokens."},{name:"--badge-line-height",value:"calc(1 / 0.75)",description:"Companion to --badge-font-size (gh#260). The cva's old `text-xs` utility also set line-height via Tailwind's default `--text-xs--line-height: calc(1 / 0.75)` (the theme remaps --text-xs but never that companion). Same unitless ratio here keeps the default badge pixel-identical now that badge-layout.css owns the type metrics."},{name:"--badge-icon-size",value:"var(--icon-size-xs)",description:"Leading/trailing glyph inside the pill. It was a bare `0.75rem` in badge-layout.css with no token at all, so a service could only resize it with `!important` or a forked stylesheet \u2014 the two routes the icon axis's tier 2 exists to abolish (gh#326). Same step, so nothing moves. Matches --badge-font-size's step by design: the glyph reads as a character in the label's run, so the two retune together. Deliberately NOT --scaling-multiplied \u2014 the literal it replaces did not track density."},{name:"--badge-space-x-removable",value:"var(--space-1)",description:"Removable chip (antd Tag closable) \u2014 \xD7 affix inside the pill."},{name:"--badge-remove-offset-inline-end",value:"calc(-1 * var(--space-1))",description:"Badge component tokens."},{name:"--badge-remove-icon-size",value:"var(--badge-icon-size)",description:"Badge component tokens."},{name:"--badge-remove-rest-alpha",value:"0.7",description:"Badge component tokens."},{name:"--badge-remove-hover-alpha",value:"1",description:"Badge component tokens."},{name:"--badge-tint-fill",value:"18%",description:"DATA COLOUR (`color` prop) \u2014 the entity's own colour, not a semantic tone. A caller colour is DATA: a project administrator picks it for a status, an issue type, a tag, a label. Solid, no foreground clears WCAG AA for every colour they can pick \u2014 near-black and white measure equal at luminance 0.2029, where both land on 4.15:1, under the 4.5 that badge-sized text needs, and a real picker can produce that. So the GROUND moves instead: the colour is washed into the surface and the label stays the surface's own foreground, which makes the ratio a function of these two knobs rather than of the colour somebody chose. The fill is where the label sits, so it is quiet; the edge carries no text, so it is free to be four times as saturated \u2014 it is what keeps a pale tint from dissolving into the surface, and where the colour still says WHICH status at a glance. At these defaults the worst case across the sRGB cube measures 8.52:1 (both themes), against 4.15 for a solid chip."},{name:"--badge-tint-edge",value:"45%",description:"Badge component tokens."},{name:"--badge-tint-surface",value:"initial",description:"`initial`, NOT `hsl(var(--card))` \u2014 the :root freeze rule (docs/TOKEN-RESOLUTION.md \xA73). Bound here, `var(--card)` substitutes against the ROOT's card once, so a `.dark` REGION below root moved `--card` and the chip kept the light one. Measured: in a `.dark` region the scope reported `--card: 48 8% 12%` while the chip still painted `color(srgb 0.9933 0.9933 0.9867)` \u2014 a white chip in a dark panel. `.dark` on `<html>` was always right, which is why it survived: the freeze only shows where the scope sits BELOW the binding. Same shape as gh#848 and gh#866; found by `scripts/explain-token.mjs`. The formula now lives at the call site in badge-layout.css, where the scope is in effect."},{name:"--badge-tint-foreground",value:"initial",description:"Badge component tokens."},{name:"--badge-color",value:"initial",description:"`initial` FOR THE SAME REASON, and getting this wrong once is how I learned to measure twice: the first fix moved `--badge-tint-surface` to the call site but left this one bound here as `var(--badge-tint-surface, hsl(var(--card)))`. That still substitutes at :root, so in a `.dark` region the chip mixed the LIGHT card into the dark surface and painted `color(srgb 0.285\u2026)` where `.dark` on `<html>` painted `0.1296` \u2014 a fix that moved the defect instead of removing it, and one a screenshot would have called correct. The whole chain is now resolved at the call site. The old warning still holds \u2014 an UNSET custom property makes color-mix() invalid at computed-value time and drops the background AND the border \u2014 which is exactly why every read below carries the full fallback rather than relying on this declaration."},{name:"--banner-radius",value:"0",description:"Square corners \u2014 a strip spans its container edge-to-edge, so it carries no radius."},{name:"--banner-border-width",value:"initial",description:"The strip keeps a single hairline block-end rule (tone-coloured via the alert border rules); inline/block-start edges are open so it reads as part of the frame. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--banner-space-inset-block",value:"var(--space-3)",description:"Strip inset. Block is denser than the inline Alert card; inline defaults to the page gutter so banner text aligns with page content under AppShell/PageContainer."},{name:"--banner-space-inset-inline",value:"var(--space-page-active-x, var(--space-6))",description:'Banner \u2014 the full-bleed attention strip (<Banner> = Alert variant="banner"). Colour stays with the alert tone rules; these tokens own ONLY the strip geometry, so a service retunes the banner once here instead of forking alert-layout.css (rule #45 \u2014 every service-tunable constant gets a knob).'},{name:"--callout-rail-width",value:"var(--space-1)",description:"A leading RAIL, not a frame: an aside inside prose reads as an annotation of the column it sits in, and four borders make it a card that interrupts the column."},{name:"--callout-radius",value:"initial",description:"Squared off against the rail; the trailing corners still follow the alert radius. `initial`, not `var(--alert-radius)` \u2014 a :root binding freezes (gh#888); default resolves at the call site. Default = var(--alert-radius)."},{name:"--callout-space-inset-block",value:"var(--space-3)",description:"Prose insets. Block matches the paragraph rhythm around it rather than the denser banner strip; inline leaves room for the rail without shifting the text."},{name:"--callout-space-inset-inline",value:"var(--space-4)",description:'Callout \u2014 the in-prose aside (<Callout> = Alert variant="callout"). Colour stays with the alert tone rules; these tokens own ONLY the aside geometry, so a service retunes every callout once here instead of forking alert-layout.css (rule #45 \u2014 every service-tunable constant gets a knob).'},{name:"--callout-space-stack",value:"var(--space-4)",description:"Block margin \u2014 a callout separates from the paragraphs it sits between."},{name:"--card-space-inset",value:"var(--space-section-active)",description:"Horizontal inset of every slot (header / content / footer) + the resting top/bottom shell padding. This is the column the title, body and footer all align to."},{name:"--card-space-shell-y",value:"initial",description:'BLOCK-axis (top/bottom) shell padding of the slotted card rhythm \u2014 a plain header\'s top, a `solo` body\'s top, and the terminal slot\'s bottom (gh#232). Split off --card-space-inset so a shell (AuthShell compact) can retune the card\'s height WITHOUT moving the inline column. Declared `initial` \u2014 NOT `var(--card-space-inset)` \u2014 so the default resolves at the CALL SITE: a :root binding would freeze at the :root inset and `[data-density="tight"|"cozy"]` (which override --card-space-inset on the card element) would stop reaching it. See docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 the same call-site rule applies to derived knobs. default = var(--card-space-inset)'},{name:"--card-space-header-y",value:"var(--space-stack-sm)",description:"Vertical padding of a BANDED header band (top = bottom). Drives --card-space-divided-y."},{name:"--card-space-body-y",value:"var(--space-section-active)",description:"Gap between the header and the body, and the body's own top padding \u2014 the breathing room under a title before content begins."},{name:"--card-space-solo-y",value:"initial",description:'Symmetric block padding for a SOLO content slot, so a composed shell can tune block and inline spacing independently without targeting CardContent. Declared `initial` for the SAME reason as --card-space-shell-y above: written as `var(--card-space-inset)` here it would freeze at the :root inset, and a card carrying [data-density="tight"|"cozy"] (which override --card-space-inset ON THE CARD) would keep the :root value. The default now resolves at the call site through the chain solo-y \u2192 shell-y \u2192 inset, so a solo body follows the general block knob when only that is set, and an explicit solo-y still wins. default = var(--card-space-shell-y, var(--card-space-inset))'},{name:"--card-space-footer-y",value:"var(--space-stack-sm)",description:"Vertical padding of a SEPARATED footer band (top = bottom). Drives --card-space-divided-y."},{name:"--card-space-divided-y",value:"var(--card-space-header-y)",description:"DIVIDED-section vertical padding (rule #44/#45). A header/footer that carries a divider border (banded header, separated footer) reads as its own band, so it pads SYMMETRICALLY top+bottom \u2014 distinct from a plain header that flows into the body (top inset, no bottom). One themeable knob keeps the header- and footer-band rhythm in sync; a service theme tunes the band density here instead of forking per-slot CSS."},{name:"--card-space-gap",value:"var(--space-stack-xs)",description:"Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."},{name:"--card-title-font-size",value:"var(--font-size-base)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-title-line-height",value:"var(--line-height-tight)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-title-font-weight",value:"var(--font-weight-semibold)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-description-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-description-line-height",value:"var(--line-height-normal)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-background",value:"initial",description:'Card fill + edge \u2014 opt-in knobs that DEFAULT to the live --card / --border roles. Declared `initial` (not `var(--card)`) so the default re-resolves at the call site under a scoped theme: a :root binding to a role var freezes at the :root value and a scoped `[data-tenant]` override of the role never reaches it (see docs/STANDARDS-vocabulary-tokens.md \xB7 "role-mirror knobs"). A service still overrides the knob directly (--card-background: \u2026) to win over the role default. default = hsl(var(--card))'},{name:"--card-border",value:"initial",description:"default = hsl(var(--border))"},{name:"--card-header-background",value:"initial",description:"Banded-header fill \u2014 role-tintable (rule #45): a service points this at any role, e.g. --card-header-background: var(--primary), and tunes --card-header-background-alpha for the wash strength. Default = the live --muted role (resolved at the call site). default = hsl(var(--muted))"},{name:"--card-header-background-alpha",value:"0.55",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-header-border-bottom",value:"initial",description:"Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it dashed / heavier / none without forking CSS. Pair with --card-header-background-alpha: 0 for a quiet borderless-band header. Default = 1px solid hsl(var(--card-border)) (resolved at the call site)."},{name:"--card-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) * var(--radius-ratio))"},{name:"--card-shadow",value:"initial",description:"The DXS hi-fi baseline uses a quiet 10px data surface with one shadow-sm elevation layer. Consumers can still flatten or lift cards through this knob. `initial`, NOT `var(--shadow-sm)` \u2014 a role-mirror knob written here binds at `<html>` and a scope below root that restates the elevation ramp can never reach it (docs/TOKEN-RESOLUTION.md \xA73). The default now resolves on `.ui-card`, so a `[data-tenant]`/`[data-theme]` region that sets `--shadow-sm` moves its own cards and nothing else. gh#880 item 7. default = var(--shadow-sm), resolved at the call site"},{name:"--card-glow",value:"0 0 0 0 transparent",description:"Brand glow layer \u2014 invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the surface box-shadow so a service can wash every card with the global glow, e.g. --card-glow: var(--shadow-glow), with no markup change."},{name:"--card-hover-shadow",value:"var(--shadow-md)",description:"`hoverable` (antd `hoverable`) \u2014 the elevation a pointer-interactive card steps UP to on hover. One step above the resting `--card-shadow` on the same ramp, so a service that has already flattened or lifted every card keeps a proportional lift instead of a fixed one."},{name:"--card-tint",value:"transparent",description:"Fill tint \u2014 subtle role wash over the card background (default transparent = invisible). Painted as an overlay so a service sets --card-tint: hsl(var(--primary) / 0.04) once."},{name:"--card-tint-end",value:"initial",description:'THE OTHER END OF THE TINT, AND ITS DIRECTION (gh#880 item 6). The wash used to be painted `linear-gradient(var(--card-tint), var(--card-tint))` \u2014 the same variable twice \u2014 which is a flat overlay wearing a gradient\'s clothes. A service that wanted a genuine two-colour wash had one value slot for two colours, so `--card-tint: A, B` expanded to `linear-gradient(A, B, A, B)`: a hard split, not a ramp. A glass card\'s rim highlight is a diagonal two-stop ramp (docs/GLASSMORPHISM-STANDARD.md \xA71), so this is the difference between "a card can be glass" and "a card can be tinted". BOTH ARE `initial` WITH THEIR DEFAULT AT THE CALL SITE, so the default value is the live `--card-tint` of whatever scope the card is in, not the one frozen at `<html>`, and the resting card paints `linear-gradient(to bottom, transparent, transparent)` exactly as before. default = var(--card-tint) \u2014 a single-colour wash stays flat'},{name:"--card-tint-angle",value:"initial",description:"default = `to bottom`, the direction the two-stop form already had"},{name:"--card-backdrop-blur-size",value:"initial",description:"GLASS (gh#880 item 1) \u2014 `initial`, i.e. OFF, and the default must stay `initial` rather than `0px`. An element with a `backdrop-filter` becomes the containing block for its fixed descendants (the trap `src/styles/shell-layout.css` documents on the app-launcher scrim and `src/components/layout/affix.tsx` documents for Affix), and `blur(0px)` still promotes the box to a backdrop root. Unset, the whole declaration at `.ui-card` is invalid-at-computed-value-time and `backdrop-filter` keeps its own initial `none`, so no backdrop root is created and an `Affix` inside a Card still positions against the viewport. The saturate companion is shared: `--surface-backdrop-saturate` (tokens/foundation.css). default = none \u2014 a card blurs nothing"},{name:"--card-accent-rail-width",value:"initial",description:"Accent edge \u2014 width of the semantic leading-edge stripe (data-accent). Tokenised (rule #44) so a service theme can re-tune it without forking CSS. The slot padding compensation in card-layout.css subtracts the same token, so content stays aligned on the shell whatever the rail width. default = var(--stroke-2xl), resolved at the call site (gh#906)"},{name:"--card-accent-perimeter-width",value:"initial",description:'Accent placement `perimeter` (gh#12) \u2014 the FULL attention border. Two knobs so a service can tune the edge weight and the outer ring independently; the defaults reproduce the optical weight of `variant="featured"` (1px border + 1px ring) in the card\'s own semantic accent tone instead of --primary. Structural strokes, like the base card hairline: both read the hairline step at their call sites since gh#906, so a theme restating the stroke scale moves them with everything else. default = var(--stroke-hairline), resolved at the call site (gh#906)'},{name:"--card-accent-perimeter-ring-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--card-featured-border-color",value:"initial",description:'`variant="featured"` edge \u2014 role-mirror knob (docs/TOKENS.md). `initial` so the --primary default resolves at the CALL SITE and a scoped [data-tenant]/.dark override of --primary reaches it; a service points it anywhere (e.g. var(--attention)) to retint every featured card at once. Default = hsl(var(--primary)).'},{name:"--card-featured-ring-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--stat-card-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-label-font-weight",value:"var(--font-weight-medium)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-label-letter-spacing",value:"0.04em",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-value-font-size",value:"var( --font-size-2xl, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-value-line-height",value:"1.1",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-value-font-weight",value:"var(--font-weight-semibold)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-hint-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-gap",value:"var(--space-stack-xs)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-icon-size",value:"var(--icon-size-2xl)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-icon-glyph-size",value:"var(--icon-size-lg)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-icon-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--stat-card-icon-background",value:"initial",description:"Medallion tint \u2014 soft brand wash + brand glyph by default; a service retints by overriding --primary or these tokens directly (rule #44/#45). `initial` so the --primary default re-resolves at the call site under a scoped theme (no :root freeze). Defaults = hsl(var(--primary) / 0.1) fill \xB7 hsl(var(--primary)) glyph."},{name:"--stat-card-icon-foreground",value:"initial",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--stat-card-delta-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-space-gap",value:"var(--space-stack-sm)",description:"\u2500\u2500 ServiceLauncherCard (gh#219) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Internal rhythm of a launcher tile: one gap knob drives the vertical stack AND the icon\u2194title\u2194status row, so a service theme retunes the whole tile density once."},{name:"--card-service-launcher-icon-size",value:"calc(var(--icon-size-2xl) * var(--scaling))",description:"Semantic icon surface \u2014 36px, the `--icon-size-2xl` step, multiplied by --scaling so the medallion still breathes with its sibling controls (the gh#328 rule: an icon that wants density says so itself). It read `var(--control-height-lg)` until gh#324: a CONTROL tier is the wrong axis for an icon box, and the bug was visible \u2014 `@media (pointer: coarse)` lifts the control ladder to the 44px tap floor, so on every touch device the medallion silently inflated to 48px while the glyph inside it stayed 20px."},{name:"--card-service-launcher-icon-glyph-size",value:"calc(var(--icon-size-lg) * var(--scaling))",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-icon-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--card-service-launcher-icon-background",value:"initial",description:"Available-service medallion tint. `initial` (role-mirror rule, docs/TOKENS.md) so the role defaults resolve at the CALL SITE and a scoped [data-tenant]/.dark override reaches them. Defaults = hsl(var(--accent)) fill \xB7 hsl(var(--primary)) glyph."},{name:"--card-service-launcher-icon-foreground",value:"initial",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-unavailable-icon-background",value:"initial",description:"Unavailable medallion tint \u2014 applied when the consumer supplies `disabledReason`, so an un-launchable service never reads as brand-live. `initial` for the same role-mirror reason. Defaults = hsl(var(--muted)) fill \xB7 hsl(var(--muted-foreground)) glyph."},{name:"--card-service-launcher-unavailable-icon-foreground",value:"initial",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Description prose \u2014 also drives the disabled-reason line and the catalog-CTA caption."},{name:"--card-service-launcher-description-line-height",value:"var(--line-height-body)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-metadata-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Mono metadata line (hostname \xB7 plan) \u2014 tighter leading than prose by design."},{name:"--card-service-launcher-metadata-line-height",value:"var(--line-height-normal)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--card-service-launcher-cta-min-height",value:"calc(var(--control-height-lg) * 4)",description:"Dashed catalog/add companion tile: kept tall enough to sit level with a populated launcher tile in the same grid row. Four control tiers \u2248 medallion + title + description + action."},{name:"--card-service-launcher-skeleton-title-width",value:"var(--space-12)",description:"Skeleton bar widths \u2014 shape-matched placeholders for the title and status badge."},{name:"--card-service-launcher-skeleton-status-width",value:"var(--space-10)",description:"Card component tokens: card chrome derives from semantic layout tokens."},{name:"--chart-trend-plot-height-xs",value:"3.5rem",description:"\u2500\u2500 Plot height tiers (size = xs|sm|md|lg) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 `xs` is the canonical dashboard-summary-card density: a seven-day trend that sits under a KPI headline without stealing its vertical rhythm. A service retunes the whole scale here; a screen picks a step with the `size` prop."},{name:"--chart-trend-plot-height-sm",value:"5rem",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-plot-height-md",value:"7.5rem",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-plot-height-lg",value:"10rem",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-plot-height",value:"var(--chart-trend-plot-height-xs)",description:"Active tier \u2014 chart-layout.css re-points this per `data-size`; overriding it directly pins one height for every trend regardless of `size`."},{name:"--chart-trend-bar-gap",value:"var(--space-2)",description:"\u2500\u2500 Bar marks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Thin marks, a surface gap between neighbours and a rounded data-end anchored to the baseline (the data-visualization mark spec)."},{name:"--chart-trend-bar-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--chart-trend-bar-max-width",value:"1.5rem",description:"Ceiling on a single mark so a 3-point trend does not render slabs."},{name:"--chart-trend-bar-min-height",value:"initial",description:"Floor so a zero/absent value still reads as a plotted category rather than a hole. default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--chart-trend-bar-background",value:"initial",description:'Muted mark fill \u2014 role-mirror knob, declared `initial` so the role default re-resolves at the CALL SITE under `.dark` / `[data-tenant]` (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Default = hsl(var(--muted-foreground) / 0.75), which clears the 3:1 non-text contrast floor (WCAG 1.4.11) against the card surface.'},{name:"--chart-trend-bar-background-alpha",value:"0.75",description:"Opacity applied to the muted-fill role default."},{name:"--chart-trend-bar-emphasis-background",value:"initial",description:'Emphasized ("current") mark fill \u2014 role-mirror knob. Default = hsl(var(--primary)).'},{name:"--chart-trend-baseline-border",value:"initial",description:"\u2500\u2500 Baseline + category ticks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Chrome defaults QUIET (rule #44): no baseline rule at rest. A service opts in with `--chart-trend-baseline-border: var(--stroke-hairline) solid hsl(var(--border));`."},{name:"--chart-trend-tick-gap",value:"var(--space-1)",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-tick-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Chart component tokens \u2014 the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file."},{name:"--chart-trend-footer-gap",value:"var(--space-2)",description:"Gap between the plot block and the optional activity footer slot."},{name:"--chart-category-axis-gap",value:"var(--space-2)",description:"\u2500\u2500 Category axis (horizontal BarChart) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The category axis of a horizontal bar chart holds free text, and in Japanese that text is a company name of 8\u201310 full-width glyphs (100\u2013125px at the tick size). recharts reserves a flat 60px whatever the ticks say, which painted those names OUTSIDE the plot box where the SVG clip cut them from the START \u2014 losing exactly the identifying `\u682A\u5F0F\u4F1A\u793E` (gh#409 \xB7 1). The chart now measures its widest tick and sizes the axis from it. These two knobs own the limits of that: how much air sits between the tick and the plot, and how much of the canvas a category axis may take before labels are truncated at their END instead. A service that runs longer names raises the fraction; one that wants the bars to dominate lowers it."},{name:"--chart-category-axis-max-fraction",value:"0.4",description:"Share of the canvas the category axis may occupy, 0..1. At the 1102px dashboard column this is ~440px \u2014 four times a 10-glyph \u5168\u89D2 name \u2014 so truncation is the exception, not the rule, while a pathological label still cannot squeeze the bars out of their own chart."},{name:"--chart-series-stroke-width",value:"2",description:"Stroke weight of the line, and of an area's top edge."},{name:"--chart-area-fill-alpha",value:"0.2",description:"Opacity of an area's filled band. Low by design: an area overlaps its neighbours, and the line above it is what carries the value."},{name:"--chart-grid-line-dash",value:"3 3",description:"Dash pattern of the cartesian background grid (any `stroke-dasharray` value; `none` = solid)."},{name:"--chat-bubble-background",value:"initial",description:"Bubble fill. `initial` so the --muted default re-resolves at the CALL SITE under a scoped theme; a :root binding to a role var freezes at :root (docs/TOKENS.md \u2014 the :root freeze rule). Documented default = hsl(var(--muted))."},{name:"--chat-bubble-foreground",value:"initial",description:"Ink on that fill \u2014 role-mirror knob, documented default = hsl(var(--foreground))."},{name:"--chat-bubble-border-color",value:"initial",description:"The 1px edge of an `outlined` bubble. Decorative chrome, so it mirrors --border, not --input (docs/TOKENS.md \u2014 `--border` vs `--input`). Documented default = hsl(var(--border))."},{name:"--chat-bubble-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--chat-bubble-gap",value:"var(--space-3)",description:"Gap between the avatar column and the message column."},{name:"--chat-bubble-max-inline-size",value:"34rem",description:"The measure a bubble never exceeds. Long-form assistant prose past ~70 characters per line stops being readable, and a chat pane is as wide as the window (#45 \u2014 a service retunes the measure to its own column)."},{name:"--chat-bubble-avatar-size",value:"initial",description:"Avatar box. Role-mirror of a RE-SCOPED tier (--control-height is re-declared per density and by the auth shell), so it is `initial` + a call-site fallback for the same reason a colour knob is. Documented default = var(--control-height)."},{name:"--chat-bubble-padding-block",value:"var(--space-2)",description:"Inner inset of the bubble body, at the default `md` step. The xs/sm/lg steps re-declare these two on the element itself (styles/data-display-layout.css)."},{name:"--chat-bubble-padding-inline",value:"var(--space-3)",description:"ChatBubble / ChatBubbleList component tokens \u2014 one message in a conversation, and the feed it lives in (docs/roadmap/ai-chat-components.md \xA72/\xA73). NAMING NOTE: the roadmap spelled the surface knob `--chat-bubble-surface`. `surface` is not one of the property words `check:token-tiers` accepts for the `--{component}-{part}-{property}` shape, so the knob ships as `--chat-bubble-background` \u2014 the same word every other component tier uses for the same role (`--card-background`, `--list-row-unread-background`)."},{name:"--chat-bubble-list-gap",value:"var(--space-4)",description:"Vertical rhythm BETWEEN messages in a ChatBubbleList."},{name:"--chat-bubble-list-jump-inset",value:"var(--space-3)",description:'Inset the "jump to latest" affordance keeps from the block-end edge of the feed.'},{name:"--chat-bubble-typing-caret-color",value:"initial",description:'The typed-so-far caret drawn while `typing` animates. Role-mirror knob, documented default = hsl(var(--muted-foreground)). Never the only signal: the article also carries `aria-busy` and a localized sr-only "typing" string.'},{name:"--chat-bubble-typing-caret-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--chat-bubble-typing-caret-height",value:"1em",description:"One line box tall, so the caret matches whatever type ramp the bubble is rendering at rather than a fixed pixel height a service theme could not move."},{name:"--chat-bubble-skeleton-short-inline-size",value:"60%",description:"The short line of the two-line loading Skeleton \u2014 a ragged second line is what makes the placeholder read as prose rather than as a bar chart. A theme can retune the raggedness."},{name:"--chat-bubble-tone-background-alpha",value:"0.08",description:"Status-tinted bubbles (`tone`) wash the role colour exactly like Alert does, so an error bubble and an error banner agree. Never colour alone \u2014 the bubble also renders a localized sr-only tone word."},{name:"--chat-bubble-tone-border-alpha",value:"0.35",description:"ChatBubble / ChatBubbleList component tokens \u2014 one message in a conversation, and the feed it lives in (docs/roadmap/ai-chat-components.md \xA72/\xA73). NAMING NOTE: the roadmap spelled the surface knob `--chat-bubble-surface`. `surface` is not one of the property words `check:token-tiers` accepts for the `--{component}-{part}-{property}` shape, so the knob ships as `--chat-bubble-background` \u2014 the same word every other component tier uses for the same role (`--card-background`, `--list-row-unread-background`)."},{name:"--chat-bubble-end-background",value:"initial",description:'The message column of an `end`-placed (own) bubble. Role-mirror knobs so a service can tint "my" messages without touching the assistant\'s. Documented defaults = hsl(var(--primary) / 0.1) and hsl(var(--foreground)).'},{name:"--chat-bubble-end-foreground",value:"initial",description:"ChatBubble / ChatBubbleList component tokens \u2014 one message in a conversation, and the feed it lives in (docs/roadmap/ai-chat-components.md \xA72/\xA73). NAMING NOTE: the roadmap spelled the surface knob `--chat-bubble-surface`. `surface` is not one of the property words `check:token-tiers` accepts for the `--{component}-{part}-{property}` shape, so the knob ships as `--chat-bubble-background` \u2014 the same word every other component tier uses for the same role (`--card-background`, `--list-row-unread-background`)."},{name:"--chat-composer-min-height",value:"initial",description:'Floor and ceiling of the draft box, both `initial` \u2014 and that is load-bearing, not tidiness. Their defaults READ `--control-height`, which is re-declared per size step on the composer itself (`.ui-control-surface[data-size="sm"]` and friends). Bound here at `:root`, each one would resolve ONCE against the root tier and freeze: measured in Chromium, all four of `size="xs|sm|md|lg"` rendered at an identical 55px box. `initial` sends the fallback chain in `data-entry-layout.css` back to the CALL SITE, where the step\'s own `--control-height` is in scope. Same rule as ListRow\'s dividers and the compact-row knobs (docs/TOKENS.md \u2014 the :root freeze rule). Default floor = var(--control-height) \u2014 exactly one control row. Default ceiling = calc(var(--control-height) * 5) \u2014 past it the draft scrolls itself instead of pushing the page. A MULTIPLIER, never `calc(var(--control-height) \xB1 \u2026)`, which silently re-derives a tier (check:control-sizing).'},{name:"--chat-composer-max-height",value:"initial",description:"ChatComposer component tokens \u2014 the message input of a conversation (Ant Design X `Sender`). The composer is a CONTROL, so its box height is not its own decision: both bounds below are expressed in the `--control-height` tier, which is density-aware. A resting one-line composer therefore lines up with the Button beside it, and every size step (`data-size`) moves both bounds together. Never restate either as a literal length \u2014 see docs/TOKENS.md and `pnpm check:control-sizing`."},{name:"--chat-composer-gap",value:"var(--space-2)",description:"Gap between the header / draft row / footer bands."},{name:"--chat-composer-padding-block",value:"var(--space-2)",description:"Inset of the composer frame. The draft box itself is borderless \u2014 the frame IS the boundary, so two nested rounded borders never appear."},{name:"--chat-composer-padding-inline",value:"var(--space-2)",description:"ChatComposer component tokens \u2014 the message input of a conversation (Ant Design X `Sender`). The composer is a CONTROL, so its box height is not its own decision: both bounds below are expressed in the `--control-height` tier, which is density-aware. A resting one-line composer therefore lines up with the Button beside it, and every size step (`data-size`) moves both bounds together. Never restate either as a literal length \u2014 see docs/TOKENS.md and `pnpm check:control-sizing`."},{name:"--chat-composer-row-gap",value:"var(--space-2)",description:"Gap between the prefix slot, the draft box and the trailing actions."},{name:"--chat-composer-radius",value:"initial",description:"Corner shape \u2014 `initial` so the control default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root). Default = var(--control-radius)."},{name:"--chat-composer-header-border",value:"initial",description:"Divider under the `header` slot \u2014 `initial`, documented default = 1px solid hsl(var(--border)), so a service retunes the chrome once instead of per composer."},{name:"--chat-composer-footer-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:'Type scale of the footer hint line (a token counter, a "Shift+Enter for a new line" hint).'},{name:"--control-height-compact",value:"var(--band-height-sm)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-default",value:"var(--band-height-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-comfortable",value:"var(--band-height-xl)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-padding-x-compact",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-padding-x-default",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-padding-x-comfortable",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-bounded-width",value:"min(15rem, 48vw)",description:'Held width for `width="bounded"` controls (gh#375). `min()` so the value is a ceiling on a desktop bar and a share of the viewport on a phone, never a fixed rem that overflows it.'},{name:"--control-height",value:"calc(var(--control-height-default) * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-sm",value:"calc(var(--control-height) - calc(0.25rem * var(--scaling)))",description:"Adjacent control sizes, derived from the active --control-height. The \xB1step is scaled too so the whole control ladder stays proportional under --scaling."},{name:"--control-height-lg",value:"calc(var(--control-height) + calc(0.25rem * var(--scaling)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-xs",value:"calc(var(--control-height) - calc(0.5rem * var(--scaling)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-padding-x",value:"var(--control-padding-x-default)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-gap",value:"var(--space-inline-sm)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-gap-sm",value:"var(--space-inline-xs)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-radius",value:"var(--radius)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-radius",value:"var(--radius-md, calc(var(--radius) / var(--radius-ratio)))",description:"Button corner radius \u2014 defaults to the button's historical `rounded-md` so nothing changes by default, but is its OWN knob so a service theme can retune the button radius INDEPENDENTLY of input/control radius (issue #124). The `var(--radius-md, \u2026)` fallback is gh#888, NOT the same fix as this token's own freeze: Button reads this value through `rounded-[var(--button-radius)]`, a Tailwind utility (`@layer utilities`) that this package cannot give a fallback to from CSS \u2014 so this knob is deliberately NOT flipped to `initial` (that would still be unreachable from a scoped theme, gh#824 measured `--control-radius: 37px` on `:root` moving 0 buttons). What DOES need the fallback is the read of `--radius-md` itself: gh#888 unfreezes the \u03C6 tier globally, so without this fallback `--radius-md` resolves to nothing and `--button-radius` \u2014 and therefore every Button's corner \u2014 would go to 0. The formula keeps this declaration byte-identical to before gh#888 (still frozen at :root against --radius, same historical limitation)."},{name:"--button-default-background",value:"initial",description:"THE BUTTON'S OWN SURFACE \u2014 one knob per painted variant (gh#880, standard \xA71). Every variant painted a bare role (`hsl(var(--primary))`, `hsl(var(--background))`, `hsl(var(--secondary))`, `hsl(var(--destructive))`) with no knob of its own, so the only way to retint a button was to retint the ROLE \u2014 and `--primary` is also the link ink, the focus mark and a chart series. There was no way to say \"this button is translucent\" without saying it about eight other things. WHY BUTTONS AT ALL. namethatui's source draws the line this library needed: glassmorphism is a decorative skin for ANY surface including controls, while Apple's Liquid Glass reserves glass for the floating control layer above opaque content. A glass page with a solid primary button on it is the Liquid Glass split applied backwards. FOUR FILLS, NOT SIX. `ghost` and `link` paint no resting surface, so they have nothing to knob. The HOVER fills are deliberately not knobs either: they already resolve from roles at their own call sites (`--primary-hover`, `--accent`, `--secondary`), so a theme reaches them today \u2014 the documented consequence being that a glass RESTING fill with an untouched hover gives a button that turns opaque under the pointer, and a theme that wants glass on both moves the role too. ONE BLUR FOR THE WHOLE COMPONENT, because the material is one decision per component and the variants are one component. `initial`, so unset there is no blur and no backdrop root. default = hsl(var(--primary)) at the call site"},{name:"--button-destructive-background",value:"initial",description:"default = hsl(var(--destructive)) at the call site"},{name:"--button-outline-background",value:"initial",description:"default = hsl(var(--background)) at the call site"},{name:"--button-outline-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--button-outline-border-color",value:"initial",description:"default = hsl(var(--input)) at the call site"},{name:"--button-secondary-background",value:"initial",description:"default = hsl(var(--secondary)) at the call site"},{name:"--button-secondary-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--button-link-foreground",value:"initial",description:"THE ONE BUTTON KNOB THAT IS INK, NOT A FILL (gh#884) \u2014 the `link` variant's text colour. The others above are backgrounds, so their contrast is owned by the label token that rides on them; this one IS the label, over a surface the library does not control. `--primary` is only ever guaranteed against `--primary-foreground`, so a light seed or a translucent panel makes the default illegible (measured 1.43:1 at `#FFD400`, 1.10:1 on glass) and the service sets this. default = hsl(var(--primary)) at the call site"},{name:"--button-backdrop-blur-size",value:"initial",description:"default = none \u2014 a button blurs nothing"},{name:"--control-font-size",value:"var(--font-size-base)",description:"Control surface knobs \u2014 font-size, border width and resting shadow of every `.ui-control` (input / picker trigger). Tokenised so a service theme tunes them once instead of each component hard-coding Tailwind utilities. Defaults preserve the historical look (font-size-base, 1px border, shadow-xs)."},{name:"--control-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--control-shadow",value:"var(--shadow-xs)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-icon-size",value:"calc(var(--icon-size-md) * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-icon-size-sm",value:"calc(var(--icon-size-sm) * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-status-warning-border-color",value:"var(--warning)",description:"VALIDATION STATUS \u2014 antd's `status` axis (docs/DESIGN-AUTHORITY.md names Ant Design the taxonomy authority). Only the FOCUS half is a knob: the boundary itself has to be painted from a Tailwind utility, because `border-input` sits in a later cascade layer than this file's component rules and would win over any of them (measured in Chromium \u2014 see components/data-entry/control-appearance.ts). The error boundary therefore reuses the role `aria-invalid:border-destructive` already paints, and cannot drift into a second red. The warning halo borrows the ERROR halo's alpha rather than inventing a second opacity: antd derives both from one `colorXxxOutline` recipe and the generated file carries only the error one (scripts/gen-antd-tokens.mjs)."},{name:"--control-status-warning-glow-color",value:"var(--warning)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-status-warning-glow-alpha",value:"var(--control-outline-error-alpha)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--number-input-touch-height",value:"var(--band-height-2xl)",description:"THE BAND A NumberInput TAKES ON A COARSE POINTER, and the one control in this package that needs a taller one than rule #24's 44px floor. Its two steppers are STACKED inside the field, so each can only ever be half the band. Measured in Chromium (Playwright touch emulation, `(pointer: coarse)` matching) before this token: the default NumberInput was 44px and each stepper **24\xD719px**, with their centres 20px apart. WCAG 2.2 SC 2.5.8 wants 24\xD724, and the Spacing exception does not rescue it either \u2014 that needs 24px-diameter circles centred on each box NOT to intersect, and at 20px apart they do. 44px cannot be made to work: half of it is 22px whatever the inset and gap. 48px can, exactly \u2014 two 24px halves, no inset, no gap \u2014 so the band moves up one step for this control alone, and only where a coarse pointer says it matters. `size=\"lg\"` already lands on 48px there, so it gains the same 24\xD724 for free; `xs` and `sm` stay where the consumer put them (a deliberately smaller control is the consumer's trade, the same way rule #24 already treats them). A service that wants the 44px row back sets this to `var(--band-height-xl)` and takes 22px targets with it."},{name:"--control-variant-filled-background",value:"var(--muted)",description:"CHROME VARIANT \u2014 antd's `variant` axis. `outlined` needs no token: it is what a field already draws. `filled` swaps the boundary for a tinted surface; `borderless` drops both. Kept as knobs so a service theme can retune the dense-form treatment once, globally."},{name:"--control-variant-filled-hover-background",value:"initial",description:"default = var(--accent), resolved at the call site (the freeze rule)"},{name:"--control-variant-filled-hover-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--control-count-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Character counter \u2014 antd `count`. Quiet by default; loud only once the ceiling is passed."},{name:"--control-count-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--control-count-exceeded-color",value:"initial",description:"`initial`, not `var(--text-error)`: a binding here computes ONCE at `:root`, so a `[data-tenant]` re-theming the error ink would keep this counter on the root's answer (docs/TOKENS.md, the freeze rule). The default lives at the rule that paints it."},{name:"--control-count-space-inline",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-count-inset-block-end",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-count-inset-inline-end",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--input-addon-background",value:"var(--muted)",description:"antd `addonBefore` / `addonAfter` \u2014 a segment welded outside the field's own box."},{name:"--input-addon-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--input-addon-padding-inline",value:"var(--control-padding-x)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-content-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Switch `checkedChildren` / `unCheckedChildren` and `loading`."},{name:"--switch-content-space-inline",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-spinner-size",value:"calc(var(--switch-thumb-size) - var(--space-1))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-mark-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Slider marks / dots / value bubble \u2014 antd `marks`, `dots`, `tooltip`."},{name:"--slider-mark-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--slider-mark-space-block-start",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-dot-size",value:"var(--slider-track-height)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-dot-background",value:"var(--background)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-dot-border-color",value:"var(--border)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-dot-active-border-color",value:"initial",description:"default = var(--primary), resolved at the call site"},{name:"--slider-tooltip-background",value:"var(--popover)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-tooltip-color",value:"var(--popover-foreground)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-tooltip-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-tooltip-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--slider-tooltip-padding-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-tooltip-offset-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-button-background",value:"var(--background)",description:'Radio `optionType="button"` \u2014 antd\'s welded radio bar.'},{name:"--choice-button-color",value:"initial",description:"default = var(--foreground), resolved at the call site (gh#906)"},{name:"--choice-button-border-color",value:"var(--input)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-button-selected-color",value:"initial",description:"The four brand-coloured knobs default at the call site \u2014 a `:root` binding would freeze on the root's primary and ignore a scoped [data-tenant] re-theme (docs/TOKENS.md, the freeze rule). default = var(--primary)"},{name:"--choice-button-selected-border-color",value:"initial",description:"default = var(--primary)"},{name:"--choice-button-selected-border-color-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--choice-button-solid-background",value:"initial",description:"default = var(--primary)"},{name:"--choice-button-solid-color",value:"initial",description:"default = var(--primary-foreground)"},{name:"--toggle-focus-ring-width",value:"initial",description:'Ring knobs for the two controls that historically wanted a softer mark than the global default \u2014 both are filled surfaces where the ring was felt to read as a second border. THE ALPHA IS 1, AND THAT IS THE CRITERION TALKING. WCAG 2.2 SC 1.4.11 asks for \u22653:1 between the focused and unfocused states of the pixels that mark focus, and colour is the whole of that bar. Measured against this palette, the focus hue at alpha 0.35 composites to 1.64:1 against the page (0.45 \u2192 \u22481.90); nothing in that band is a compliant indicator, so "softer" was buying taste at the cost of the criterion. The softening now comes from the HALO (`--focus-ring-glow-*`), which sits outside the opaque stop and is free to be as quiet as it likes because it is decoration rather than the indicator. The knobs stay \u2014 a service can still trade the criterion away deliberately \u2014 but the shipped default no longer makes that trade silently. Guarded by src/tokens/__tests__/focus-ring-contrast.test.ts. default = var(--stroke-lg), resolved at the call site (gh#906)'},{name:"--toggle-focus-ring-alpha",value:"1",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-focus-ring-width",value:"initial",description:"Mark width for a BORDERED FIELD. This knob exists because a field is the one control that already owns a boundary, so it is the one place the mark could plausibly be dropped and the recoloured border left to carry the state \u2014 which is the established treatment for a bordered field: a primary border plus a translucent halo, nothing in between. It ships at the same step as `--focus-outline-weight`, the hairline stroke, so a field and a button carry the same weight. A gate asserts the two stay equal, because this token cannot literally READ the global one without freezing at :root (docs/TOKENS.md, the freeze rule). It feeds `--focus-ring-weight`, never `--focus-ring-width`. The width is `weight \xD7 --focus-outline`, so a field's mark is still switched off with everything else \u2014 a knob that bypassed the switch would be a hole in it. If a service sets this, note the unit: the halo's spread is summed with a length in `calc()`, and CSS refuses to add a unitless number to a length \u2014 a bare `0` makes the whole box-shadow invalid at computed-value time and it resolves to NONE. Write `0px`. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--rating-focus-ring-offset",value:"2px",description:"Outline-form gaps \u2014 marks where a radius-hugging ring would touch the glyph."},{name:"--rating-star-filled-color",value:"initial",description:"Star paint (gh#694). HSL components, `initial` so the default resolves at the star \u2014 a `:root` binding would freeze on the root's role and ignore a scoped [data-tenant] theme (the freeze rule). Filled default = var(--warning); empty default = var(--muted-foreground) at the alpha."},{name:"--rating-star-empty-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--rating-star-empty-alpha",value:"0.45",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--checkbox-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--checkbox-size",value:"calc(1rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--checkbox-size-compact",value:"0.875rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--checkbox-size-comfortable",value:"1.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-gap",value:"var(--space-inline-sm)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-group-gap-x",value:"var(--space-6)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-group-gap-y",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-description-gap",value:"0.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-control-offset",value:"0.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-width",value:"calc(2.25rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-width-compact",value:"2rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-width-comfortable",value:"2.5rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-height",value:"calc(1.25rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-height-compact",value:"1.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-height-comfortable",value:"1.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-size",value:"calc(1rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-size-compact",value:"0.875rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-size-comfortable",value:"1.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-translate",value:"calc(1rem * var(--scaling))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-translate-compact",value:"0.875rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-thumb-translate-comfortable",value:"1.125rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-track-height",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-thumb-size",value:"1rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-vertical-min-block-size",value:"10rem",description:"A vertical slider fills its container's block size; this keeps one visible in a container that has none (antd leaves it at 0 and relies on the page to size it)."},{name:"--otp-slot-size",value:"initial",description:'InputOTP slot box (gh#233). Its own knob so an auth surface can widen the 6-slot challenge row to fill a wide panel WITHOUT re-scoping --control-height (which would resize every other control in the same card). Declared `initial` \u2014 the tier-mirror form of the role-mirror rule in docs/TOKENS.md: the default must resolve at the CALL SITE (`var(--otp-slot-size, var(--control-height))`), because `--otp-slot-size: var(--control-height)` here would FREEZE at the :root tier (32px) and an OTP row inside `.ui-auth-shell[data-variant="canonical"]`, which re-scopes --control-height to 36px, would silently shrink. Verified in Chromium: 36px before and after. A service opts in with a NAMED tier (`var(--control-height-lg)`), never a calc. default = var(--control-height) at the call site'},{name:"--otp-slot-inline-size",value:"initial",description:'Per-AXIS overrides of the slot box (gh#12). --otp-slot-size stays the square shorthand; these two win over it when set, so a code field can be WIDER-than-tall or TALLER-than-wide without abandoning the token. A canonical device-grant code field is 27.5x52 per slot (a 4-slot `appearance="grouped"` box of 112x54 with its 1px group border) \u2014 not expressible with one square knob, which is why grouped OTP measured 146x38 against that artboard. `initial` for the same tier-mirror reason as --otp-slot-size: the whole fallback chain (axis \u2192 square \u2192 --control-height) must resolve at the CALL SITE so a shell that re-scopes --control-height still reaches an OTP row that sets neither axis. default = var(--otp-slot-size, var(--control-height))'},{name:"--otp-slot-block-size",value:"initial",description:"default = var(--otp-slot-size, var(--control-height))"},{name:"--otp-container-align",value:"flex-start",description:'Main-axis alignment of the whole OTP row (rule #44/#45 \u2014 chrome is a token, default quiet). `flex-start` is the historical behaviour, so an existing field is byte-identical; a centred code field is `align="center"` on InputOTP (which wins over this knob) or this token set once in a service theme. It exists because EVERY consumer was wrapping .ui-otp-container in a flex-centring div to get a centred challenge.'},{name:"--checkbox-checked-background",value:"initial",description:'Checked/on/active fills \u2014 `initial` so the --primary default re-resolves at the call site under a scoped theme (a :root binding to var(--primary) freezes at the :root value and a scoped [data-tenant] override of --primary never reaches it). A service retints the "selected" state by overriding these directly. Defaults = hsl(var(--primary)) \xB7 slider track 0.2\u03B1.'},{name:"--switch-checked-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--toggle-on-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-track-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--slider-range-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--switch-unchecked-background",value:"initial",description:'Switch OFF track fill (gh#315) \u2014 `initial`, default hsl(var(--input)). Its own knob so a service can quieten the off-track without dragging the --input control-boundary role back below the WCAG SC 1.4.11 floor (rule #45); whatever you set still owes 3:1 against the page and against the thumb (--background), or "off" stops being a visible state.'},{name:"--switch-unchecked-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--switch-content-unchecked-foreground",value:"initial",description:"A labelled OFF track defaults to muted-foreground rather than the input boundary role: text needs 4.5:1, not the 3:1 required of an empty track. Pair custom track fills with this foreground; the default background role contrasts in both light and dark themes."},{name:"--color-picker-input-width",value:"6.5rem",description:"ColorPicker \u2014 width of the hex text field beside the swatch."},{name:"--color-picker-preset-size",value:"var(--touch-target-min)",description:"ColorPicker `presets` (gh#1055). The swatch box IS the radio's pointer target, so it sits on the WCAG 2.2 SC 2.5.8 floor (antd's own preset block is 24px too) and never rides --scaling below it. The gap leaves room for the checked ring, which is drawn outside the box."},{name:"--color-picker-preset-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--color-picker-presets-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-list-max-height",value:"min(300px, 50vh)",description:"Command / CommandPalette \u2014 list height, inner paddings and the palette's own box."},{name:"--command-input-padding-x",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-group-padding",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-item-padding-y",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-item-padding-x",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-item-gap",value:"var(--control-gap)",description:"The gap between a row's leading mark and its label. `.ui-command-item` is a flex row and had NO gap at all, so every command/palette/picker row with an icon rendered its glyph flush against the text \u2014 measured at 0px between an organization mark and its name. It reads --control-gap because a command row is a control row: the same distance the trigger it opened from already puts between its own icon and label."},{name:"--command-list-split-padding",value:"0",description:"`Command split` (antd List `split`, gh#699) \u2014 a list drawn as ONE ruled box. --command-list-split-padding the group/list padding under split: 0, so no inner frame separates the rows from the panel edge. --command-list-split-inset the inline inset the SURFACE puts between the panel edge and the list, which a split row cancels (negative margin) and pays back as padding so its fill and rule still meet both edges. 0 for a bare Command; OrgSwitcher sets its column inset. --command-item-divider-width the hairline between rows. --command-item-divider-color ROLE-MIRROR KNOB \u2014 `initial` here, default resolved at the call site = var(--border) (HSL channels; docs/TOKENS.md)."},{name:"--command-list-split-inset",value:"0px",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-item-divider-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--command-item-divider-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-width",value:"35rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-inset-top",value:"calc(var(--space-6) * 4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-viewport-inset",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-hint-padding-y",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-hint-padding-x",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-palette-hint-gap",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-input-edge-inset",value:"var(--space-3)",description:"SearchInput \u2014 the inset the leading/trailing icons sit at, and the field padding derived from it so the text never runs under an icon."},{name:"--search-input-start-padding",value:"calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-input-end-padding",value:"calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--choice-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"The --font-size-xs tier, spelled once per control that reads it, so a service can retune a single one of them without moving the whole scale."},{name:"--color-picker-hex-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--color-picker-presets-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--command-group-heading-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-input-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tag-input-chip-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--toggle-sm-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--toggle-xs-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-sm-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-affix-inset-inline-end",value:"var(--space-2)",description:"TRAILING AFFIX \u2014 the clear \u2715 / chevron overlay a select-family trigger parks at its inline end. Select, SearchSelect and TagInput each hard-coded the same `end-2 size-6 rounded-sm opacity-50` stack independently (#319), so a service retuning affix weight had to chase the literal through several components. One shared set of knobs instead \u2014 this is a CONTROL-level concern, not a per-component one."},{name:"--control-affix-action-size",value:"1.5rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-affix-action-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--control-affix-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-affix-rest-alpha",value:"0.5",description:"Resting weight of an affix glyph \u2014 it must read as secondary until hovered/focused."},{name:"--control-trigger-space-inline-end",value:"2.25rem",description:"2.25rem \u2014 the room a single trailing affix needs. Written as a raw rem because the literal it replaced (`pe-9`) is a flat Tailwind step, not a density-scaled one."},{name:"--control-inline-affix-size",value:"1.25rem",description:"INSIDE-FIELD AFFIX \u2014 the leading/trailing controls Input and TimePicker render WITHIN the field box, as opposed to the overlay affix (--control-affix-*) that Select and SearchSelect park on top of a trigger. Both carried the identical literal stack (#319). Because these sit on the field's own surface rather than over it, they rest a touch heavier than the overlay pair \u2014 that difference is the reason the two sets stay separate."},{name:"--control-inline-affix-icon-size",value:"var(--control-affix-icon-size)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-inline-affix-space-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-inline-affix-inset-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-inline-affix-rest-alpha",value:"0.7",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-inline-affix-space-inline-end",value:"2.25rem",description:"Inline room the field reserves so its text never runs under a single affix."},{name:"--textarea-clear-inset-block-start",value:"var(--space-2)",description:"Input centres its affix on the field's single line; a textarea has no single line to centre on, so its clear control parks at the top-end corner instead."},{name:"--control-multiline-padding-block",value:"var(--space-2)",description:"MULTILINE BOX \u2014 the block padding of `.ui-control-multiline` (Textarea). It was a bare `--space-2` inside the padding shorthand, which made it unreachable for a service that runs a denser composer, AND it is the constant the auto-grow row maths has to add back, so the two had to read the same knob or drift (#45)."},{name:"--textarea-autogrow-line-height",value:"initial",description:'The unit a "row" is measured in. `initial` on purpose: the call site reads `var(--textarea-autogrow-line-height, var(--line-height-normal))`, so a service that retunes the multiline line-height for CJK legibility retunes the ceiling with it (#46). Unitless \u2014 it is multiplied by `--control-font-size`.'},{name:"--textarea-autogrow-min-height-rows",value:"1",description:"Floor of the grown box, in text rows. The `minRows` prop overrides per instance \u2014 the same theme-global / prop-local priority as `--form-label-width` vs `labelWidth`. The floor is additionally clamped up to `--control-height` so a resting one-row composer still lines up with the Input / Button beside it instead of undercutting the control tier."},{name:"--textarea-autogrow-max-height-rows",value:"8",description:"Ceiling of the grown box, in text rows; past it the control scrolls internally instead of pushing the page. `maxRows={0}` sets this to `infinity` for an unbounded box."},{name:"--textarea-autogrow-box-inset",value:"calc( (var(--control-multiline-padding-block) + var(--control-border-width, var(--stroke-hairline))) * 2 )",description:"The non-text part of the box the row maths must add back: block padding + border, both edges. `.ui-textarea-autogrow--ghost` re-declares it without the border, because the ghost variant drops its own chrome."},{name:"--control-composite-field-space-gap",value:"var(--space-2)",description:"COMPOSITE FIELD \u2014 the bordered box that wraps two inputs plus a separator (date/month range pickers) or one input plus affixes. Shared so the four range/picker fields cannot drift into four slightly different boxes."},{name:"--input-file-button-height",value:"var(--band-height-sm)",description:"The <input type=file> button is a browser-owned box we restyle; it sits one tier below the field so it reads as a control INSIDE the control."},{name:"--input-file-button-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-panel-max-width",value:"32rem",description:"SEARCH-SELECT \u2014 the Popover+Command combobox. Its panel geometry was baked onto the component as arbitrary values (`max-w-[min(32rem,calc(100vw-1.5rem))]`), so a service could not widen the panel or change the viewport gutter without forking."},{name:"--search-select-panel-inline-size",value:"auto",description:"Seat for a NUMERIC `popupMatchSelectWidth`. `auto` is the inert default \u2014 the knob only does anything once a call site sets it, and then the value is that consumer's own measurement."},{name:"--search-select-panel-viewport-inset",value:"var(--space-6)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-list-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-list-max-height",value:"none",description:"antd `listHeight` writes this per instance; `none` lets the panel's own available height win."},{name:"--search-select-footer-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-option-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-option-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-option-sublabel-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-status-space-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-status-space-block",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-placeholder-space-block",value:"var(--space-6)",description:"Empty/error states sit alone in the panel, so they get a taller, centred block."},{name:"--search-select-status-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-select-spinner-size",value:"1rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-column-min-width",value:"9rem",description:"CASCADER \u2014 column browser + flat search list. Its option rows, column widths and panel paddings were literals on the component (#319), so a service could not widen a column to fit longer JA labels or tighten the row rhythm without forking."},{name:"--cascader-columns-max-height",value:"min(280px, 50vh)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-list-max-height",value:"min(300px, 50vh)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-panel-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-space-inline",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-space-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-space-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-option-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-result-space-inline",value:"var(--space-2)",description:"The flat search result row is denser than a column row \u2014 it has no chevron to balance."},{name:"--cascader-result-space-block",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-result-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--cascader-result-icon-space-inline-end",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--cascader-empty-space-block",value:"var(--space-6)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--select-content-max-height",value:"24rem",description:"SELECT \u2014 the Radix listbox surface. Its popup shares the menu row rhythm (--menu-item-*), so only what is genuinely its own lives here (#319)."},{name:"--select-content-inline-size",value:"auto",description:"Seat for a NUMERIC `popupMatchSelectWidth` on the plain listbox. `auto` is the inert default."},{name:"--select-content-background",value:"initial",description:"THE LISTBOX SURFACE \u2014 and it is deliberately NOT the trigger's (gh#880, docs/GLASSMORPHISM-STANDARD.md \xA74b). Select is two problems: the TRIGGER is a form field and takes `--control-surface-background` with every other field, while the LISTBOX is an overlay that opens over arbitrary page content and needs the most opaque fill in the system \u2014 a 7-line menu over a photograph is unreadable at a card's alpha. One knob for both would make the correct answer for one the wrong answer for the other. `initial` with the role default at the call site, the same shape `--popover-surface-background` uses; the listbox painted a bare `hsl(var(--popover))` with no knob at all until now. default = hsl(var(--popover)) at the call site"},{name:"--select-content-backdrop-blur-size",value:"initial",description:"default = none \u2014 the listbox blurs nothing"},{name:"--select-empty-space-block",value:"var(--search-select-placeholder-space-block)",description:"Vertical room around the `notFoundContent` row \u2014 the same breathing space the SearchSelect panel gives its own empty state, so the two empties read as one affordance."},{name:"--select-scroll-button-space-block",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--select-item-space-inline",value:"0.625rem",description:"Select rows sit slightly wider than a menu row: a listbox has no leading icon column to absorb the optical inset, so 2.5 reads level with a menu's 2 + icon."},{name:"--time-picker-column-height",value:"13rem",description:"TIME PICKER \u2014 scroll columns of hour/minute/second plus an inline affix pair. All of its geometry was literal on the component (#319): a service could not shorten the column, widen the panel for a 12-hour layout, or retune the row rhythm without forking."},{name:"--time-picker-panel-width",value:"9rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-panel-width-12h",value:"13rem",description:"12-hour mode adds an AM/PM column, so the panel is wider."},{name:"--time-picker-heading-space-inline",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-heading-space-block",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-heading-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-column-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-option-space-block",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-option-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--time-picker-option-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-footer-space-inset",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-footer-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--time-picker-affix-space-gap",value:"var(--control-inline-affix-space-gap)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-list-max-height",value:"min(300px, 50vh)",description:"TREE SELECT \u2014 a Select whose panel holds a tree. Its rows, indent and toggle were literal on the component, and the depth indent was a magic expression in JSX (`depth * 1.25 + 0.5` rem) that no theme could reach at all (#319)."},{name:"--tree-select-row-space-block",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-row-space-inline-end",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-row-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--tree-select-row-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-depth-space-base",value:"var(--space-2)",description:"Indent = base + depth \xD7 step. A denser service dials the step down without touching JSX."},{name:"--tree-select-depth-space-step",value:"1.25rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-toggle-size",value:"1.25rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-toggle-space-inline-end",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-label-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--tree-select-empty-space-block",value:"var(--space-6)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-space-inset",value:"var(--space-3)",description:"CALENDAR \u2014 the react-day-picker grid. Day/weekday cells already size from --control-height (the system control tier), but the frame around them \u2014 root inset, month gaps, nav offset, grid rhythm \u2014 was literal on the component (#319), so a service could not tighten the calendar to its own density without forking the classNames map."},{name:"--calendar-month-space-gap",value:"var(--space-4)",description:"Gap BETWEEN side-by-side months (a range picker's two panels) \u2014 not the caption\u2192grid step. Until gh#730 `.ui-calendar-month` carried it too, and a month has exactly two children, so it stacked with --calendar-grid-space-block-start into one 32px void under \u300C2026\u5E749\u6708\u300D that a screenshot read as a missing week row. One gap, one token: the month column no longer sets a gap and --calendar-grid-space-block-start is the whole caption\u2192weekday step."},{name:"--calendar-caption-space-inline",value:"var(--space-8)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-caption-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-nav-space-block-start",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-nav-space-inline",value:"var(--calendar-space-inset)",description:"THE SAME INSET AS THE GRID, by construction rather than by coincidence (gh#730 item 5). `.ui-calendar-nav` is `position: absolute; inset-inline: 0`, and an absolutely positioned box resolves its insets against the PADDING box \u2014 so the nav escapes the calendar's own --calendar-space-inset and its padding is the whole inset the chevrons get. At space-1 the `\u2039` button's outer edge measured 4px from the popover content edge while the weekday row and every day column started at 12px: an 8px split, reported as \u300Cl\u1EC1 c\u1EE7a button v\xE0 calendar ko b\u1EB1ng nhau\u300D. Pointing this at --calendar-space-inset makes the two ONE value \u2014 retuning the calendar's inset moves the chevrons with the grid, in LTR and RTL alike."},{name:"--calendar-nav-rest-alpha",value:"0.7",description:"Nav chevrons read as secondary until hovered \u2014 they frame the month, they are not the point."},{name:"--calendar-grid-space-block-start",value:"var(--space-3)",description:"THE caption\u2192weekday-row step, the only one now (gh#730): measured 32px before, 12px after. space-3 rather than space-2 because the unruled grid's own row rhythm is --calendar-week-space-block-start (space-2, 8px) \u2014 at 8px the caption would read as one more week row, at 12px it still reads as the boundary of a group."},{name:"--calendar-week-space-block-start",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-weekday-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-weekday-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--calendar-day-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-day-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--calendar-chevron-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-footer-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-footer-space-block-start",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--calendar-footer-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--calendar-bordered-weekday-padding-block",value:"var(--space-1)",description:"Block inset of a header cell once the grid is RULED. Unruled, the header row has no edge for its text to sit against, so it needs none; ruled, the line box started right at the 1px rule \u2014 measured 1px from the top border and 2.19px from the bottom, an inset below the smallest named step. The smallest step, not a literal, so a service retuning the spacing grid moves it too."},{name:"--calendar-grid-border-color",value:"initial",description:"Colour of the day-grid ruling (`Calendar bordered`, on by default). `initial` on purpose: the role default is read at the call site as `var(--calendar-grid-border-color, hsl(var(--border)))` so it follows a scoped theme. The --border tier: L* 93.80 / 1.149:1 on the popover in light, L* 20.76 / 1.270:1 in dark \u2014 a rule exactly as heavy as a Card edge or a DataTable row rule. Asked for three times: 25.3.0 drew the grid at all, 27.6.0 lightened the full --input (3.47 / 3.88) to --input/0.5 (1.74 / 1.95, L* 78.67), and gh#730 measured that still darker than the --border every card and table uses and asked for the --border tier itself. Same tier as the RangeTimeline grid. Set any colour to retint, e.g. `hsl(var(--input) / 0.5)` for the 27.6.0 weight or `hsl(var(--input))` for the heavy line."},{name:"--transfer-pane-min-height",value:"14rem",description:"TRANSFER \u2014 the two-pane list mover. Pane height, header rhythm and row density were literal on the component (#319), so a service could not fit the panes to its own page grid or tighten the row for a dense admin table without forking."},{name:"--transfer-pane-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--transfer-panes-space-gap",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-header-space-inline",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-header-space-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-header-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-header-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-search-space-inset",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-list-space-inset",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-space-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-space-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--transfer-row-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-row-check-space-block-start",value:"0.125rem",description:"The checkbox is top-aligned against a two-line row, so it needs a hair of optical offset to sit level with the first line's cap height rather than its box."},{name:"--transfer-row-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-empty-space-block",value:"var(--space-8)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-actions-space-gap",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--transfer-action-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-panel-space-inset",value:"var(--space-3)",description:"PERIOD GRID \u2014 the year-nav header over a 3-column grid that DatePicker shows for a coarse `picker` (month / quarter / year), single or `range`. The `--month-picker-*` names date from when this panel lived in a separate MonthPicker; one set of knobs has always driven every copy of it, which is why merging the four pickers changed no measurement here."},{name:"--month-picker-grid-space-block-start",value:"var(--space-3)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-grid-space-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-cell-space-inline",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-nav-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-nav-rest-alpha",value:"var(--calendar-nav-rest-alpha)",description:"Year-nav chevrons read as secondary until hovered \u2014 same treatment as the Calendar nav, so the two panels stay visually consistent when either is retuned."},{name:"--month-picker-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--month-picker-separator-icon-size",value:"var(--icon-size-sm)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-xs-height",value:"initial",description:'`initial`, NOT `var(--control-height-xs)`: an alias of a ladder step declared here is substituted against :root\'s 24px and inherits frozen, so a scope that moves the ladder (a `MobileShell` scopes it to 44 / 40 / 48 / 36px) never reached it \u2014 measured, `size="xs"` stayed 24px inside the shell while every other size moved. `.ui-button--xs` reads it with the live ladder step as fallback, so the default re-resolves at the button and an override still wins.'},{name:"--button-bare-target-size",value:"initial",description:"Minimum TARGET of `variant=\"bare\"` (gh#404) \u2014 the pseudo-element hit area, not a box height, so it never shows up as geometry. The measure is the same xs tier the note above settled on as this package's WCAG 2.2 SC 2.5.8 floor (1.5rem = 24px), and it moves with that tier and with density. `initial`, NOT `var(--control-height-xs)`, for the reason `--button-xs-height` above carries: an alias of a ladder step written HERE is substituted against :root's value and inherits frozen, so a scope that moves the ladder never reaches it. Measured in Chromium at 393px inside `MobileShell`, which scopes `--control-height` to 2.75rem: `--control-height-xs` correctly re-resolved to 36px while the bare button's `::after` stayed **24\xD724** \u2014 the one touch target in a touch-first shell that did not move. `.ui-button--bare::after` reads the live step as its fallback, so the default re-resolves at the button and a service override still wins."},{name:"--button-xs-space-inline",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-xs-space-gap",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-xs-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-xs-icon-size",value:"var(--icon-size-xs)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-icon-space-inline-md",value:"var(--space-3)",description:"Icon-adjacent padding: a button whose only child is an icon needs less inline room than one carrying a label, or the glyph floats in a too-wide box. One knob per size tier."},{name:"--button-icon-space-inline-sm",value:"0.625rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-icon-space-inline-lg",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-icon-space-inline-xs",value:"0.375rem",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-space-block",value:"var(--space-2)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--otp-caret-block-size",value:"1rem",description:`The OTP blinking caret. The ratchet catches it because the selector says "caret", but it is a text CURSOR, not a chevron: a 1px bar as tall as the digit's line box. Its width belongs to the stroke scale; its height belongs to neither the icon nor the band scale, so it is declared rather than forced onto one. scale-exempt: text-caret height, tracks the OTP digit's line box, not an icon or a band`},{name:"--otp-caret-inline-size",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--otp-separator-icon-size",value:"var(--icon-size-md)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-min-width",value:"var(--space-4)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-space-inline",value:"var(--space-1)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-background",value:"initial",description:"Count pill \xB7 COLOUR (gh#320). The pill used to tint itself translucently over whatever the button's surface happened to be (`bg-primary-foreground/15`, `bg-foreground/8`), which means its contrast was a FUNCTION of that surface \u2014 and five of those combinations measured below the 4.5:1 that WCAG 2.2 SC 1.4.3 requires of small text: default (light) 3.88 \xB7 destructive (dark) 4.29 outline family (light, at rest) 4.32 \xB7 outline family (light, hover) 3.64 outline family (dark, hover) 3.68 The hover rows are the reason a static sweep never caught this: `--accent` only appears under the cursor, so no screenshot of a resting page contains the failing state. Same shape as gh#299 and gh#315 \u2014 a value that passes on the surface someone happened to check. The fix is the one gh#312 already validated on Toggle: OPAQUE role fills, which make the pill's contrast independent of the button's variant AND of hover. Each filled variant uses its own label pair SWAPPED, so the pill is exactly as legible as the label beside it and cannot be less legible under any theme that keeps that button readable at all: default --primary on --primary-foreground 5.04 light \xB7 7.07 dark destructive --destructive on --destructive-foreground 6.10 light \xB7 5.53 dark secondary --secondary on --secondary-foreground 14.25 light \xB7 12.40 dark outline family --foreground on --muted 14.25 light \xB7 12.40 dark The outline family's `--muted` fill is 1.09:1 against the button's own ground, so at rest the counter still reads as quiet text rather than a badge (#44) \u2014 it is legibility of the DIGITS that went up, not loudness of the pill. All eight are role-mirror knobs: `initial` at :root with the role default at the CALL SITE, so a scoped [data-tenant]/.dark override of the role still reaches them (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--button-count-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-default-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-default-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-destructive-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-destructive-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-secondary-background",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--button-count-secondary-color",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-label-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"LABEL \u2014 the Label primitive's own box and type (#319). Every one of these was a Tailwind literal baked into label.tsx (`text-sm leading-none flex items-center gap-2`), so a service whose form grid wanted a smaller/denser label had to hand-write font-size on every call site (which is exactly why --form-label-font-size had to be invented as a per-instance escape). They live under the `control` prefix because Label is a control-family primitive and src/tokens/components/ has no `label` file of its own. Defaults reproduce today's rendering exactly: font-size \u2190 `text-sm` \u2192 --text-sm \u2192 var(--font-size-sm) line-height \u2190 `leading-none` \u2192 1 (leading-none beats text-sm's companion line-height)"},{name:"--control-label-line-height",value:"var(--line-height-normal)",description:"A LABEL WRAPS, so its line box cannot be 1. This was a literal `1`, which is right for the one case it was chosen for \u2014 a single-line label beside a checkbox, where a cap-height box aligns cleanly \u2014 and wrong for every other. The moment the text takes two lines they collide: measured on the hosted sign-up consent label at 520px, font-size 14px with line-height 14px produced a 28px box of two touching lines. Long copy, a narrow column, and ja/vi wrapping all reach that case routinely. This package has already paid for this exact mistake once: `--auth-shell-divider-label-line- height` carries the note that a hardcoded `line-height: 1` rendered an 11px row and sat the lower half of the canonical Login card 8px high (gh#263). Same literal, same failure, one token over. `--line-height-normal` (1.5), not `--line-height-tight`: 1.25 clears the collision but two wrapped lines still read as one block, and a label that has wrapped IS prose at that point. 1.5 is also what this package already decided for the same job one layer up \u2014 `--auth-shell-field-label-line-height` \u2014 so the two agree instead of drifting. Alignment is unaffected: `.ui-label` is `display: flex; align-items: center`, so the control centres against the label box whatever its height."},{name:"--control-label-space-gap",value:"0.5rem",description:"Label \u2192 addon/required-marker gap. A RAW rem, deliberately NOT var(--space-2): the `gap-2` it replaces reads Tailwind's own --spacing grid, which this repo does NOT density-scale, so a --space-* default would silently resize every label row under a compact/comfortable density. A service that WANTS it to follow density points the knob at var(--space-2) itself."},{name:"--control-label-disabled-alpha",value:"0.7",description:"Weight of a label whose `peer` control is disabled. Deliberately its OWN knob rather than the global --disabled-opacity (0.5): a label must stay READABLE next to a disabled control \u2014 it is still the field's accessible name \u2014 so it rests one step heavier than the control it names. Default = the historical `peer-disabled:opacity-70`."},{name:"--control-surface-border-color",value:"initial",description:'\u2500\u2500 CONTROL SURFACE \u2014 the antd `variant` \xD7 `status` matrix (antd 6.6.2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The four surfaces and the two statuses are TOKENS, not utilities, and that is the whole point of this block. The select-family trigger used to state its surface as `border-input bg-background` \u2014 two Tailwind utilities, which live in `@layer utilities` and therefore beat anything a stylesheet in `@layer components` can say. A `[data-variant="filled"]` rule would have been dead on arrival, exactly the way `w-full` killed `.ui-app-setting-picker-icon` (gh#366) and `--control-bounded-width` (gh#375). So the family now withholds those two utilities and reads the surface from here instead; the DEFAULT values reproduce the previous rendering byte for byte. `--control-surface-*` is the `outlined` default; the other three name themselves. THE THREE THAT MIRROR A ROLE ARE `initial` (docs/TOKENS.md, the `:root` freeze rule), and this block is where that rule was broken. `--control-surface-background: hsl(var(--background))` SUBSTITUTES at `:root`, so it froze on the light canvas and inherited that answer into every subtree. It looks fine in product because `.dark` normally lands on `<html>`, where `:root[data-theme="dark"]` re-declares `--background` on the SAME element the binding is made on. It breaks the moment a theme is scoped BELOW `<html>` \u2014 the `[data-tenant]` route docs/CUSTOMER-THEMING.md recommends at level 3, and the `.dark` wrapper the docs Theme Editor uses to show both themes at once. Measured there before this change: a `Select` trigger in a `.dark` subtree painted `rgb(253,253,252)` under `rgb(247,247,243)` text, 1.05:1, while the `Input` beside it was correctly dark. The defaults below are unchanged; they simply resolve where the element paints instead of where the knob is declared. default = hsl(var(--input)) at the call site'},{name:"--control-surface-background",value:"initial",description:"default = hsl(var(--background)) at the call site"},{name:"--control-surface-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--control-filled-border-color",value:"transparent",description:"`filled` \u2014 antd's grey field: no edge, a muted fill, no resting elevation."},{name:"--control-filled-background",value:"initial",description:"default = hsl(var(--muted)) at the call site"},{name:"--control-filled-shadow",value:"none",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-borderless-border-color",value:"transparent",description:"`borderless` \u2014 chrome removed entirely, for a control embedded in a surface that already draws the box (a toolbar cell, an inline edit)."},{name:"--control-borderless-background",value:"transparent",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-borderless-shadow",value:"none",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-status-error-border-color",value:"hsl(var(--destructive))",description:'STATUS. `error` reuses the destructive role already wired to the focus halo through the `[aria-invalid="true"]` rule in focus-ring.css. `warning` deliberately does NOT use `--warning` (\u5C71\u5439 #f8b500). Measured against `--background` (#fdfdfb) that hue is 1.85:1 \u2014 a boundary that marks a state has to clear 3:1 under WCAG 2.2 SC 1.4.11, so shipping the brand yellow as the edge would have been a colour that only looks like a warning to people who can already see it. `--text-warning` (36 100% 28%, the darkened amber this palette keeps for exactly this reason) measures 5.4:1. A service that wants antd\'s yellow back retunes the knob and owns that trade.'},{name:"--control-status-warning-border-color",value:"initial",description:"default at the call site \u2014 freeze rule"},{name:"--control-status-warning-outline-color",value:"initial",description:'THE SAME AMBER, AS A TRIPLET \u2014 and it has to be a triplet, not a colour. The focus mark is composed as `hsl(var(--focus-outline-color) / var(--focus-ring-opacity))`, so a token that already resolves to `hsl(...)` nests one `hsl()` inside another: the declaration is then invalid at computed-value time and the WHOLE `outline` shorthand falls back to its initial value. Measured in Chromium on a focused `status="warning"` Textarea before this line existed: `outline-style: none`, `outline-width: 3px` (`medium`, the initial) \u2014 i.e. a warned field had no focus mark at all while the switch was on. It carried `--warning` (\u5C71\u5439 #f8b500) before, which is the hue the note above rejects for a state edge at 1.85:1; `--text-warning` is the darkened amber that measures 5.4:1 and is what the boundary already paints, so the edge and the mark cannot drift apart. default at the call site \u2014 freeze rule'},{name:"--control-height-compact",value:"var(--band-height-xl)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--control-height-default",value:"var(--band-height-xl)",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--search-input-end-padding",value:"calc( var(--search-input-edge-inset) + var(--touch-target-min) / 2 + var(--band-height-xl) / 2 )",description:"SearchInput's text stops at the clear \u2715's 44px TARGET, not at its 24px box (gh#1148): edge inset + half the box (where the glyph's centre is) + half the target."},{name:"--textarea-padding-block-start",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-padding-block-end",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-padding-inline-start",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--textarea-padding-inline-end",value:"initial",description:"Control primitive tokens: heights, horizontal padding, adjacent control sizes."},{name:"--conversations-gap",value:"var(--space-2)",description:"Gap between the creation button, each bucket, and each run of rows."},{name:"--conversations-list-gap",value:"var(--space-1)",description:"Gap between rows inside one run."},{name:"--conversations-item-height",value:"var(--band-height-md)",description:"ROW BOX. The row is a CONTROL, so its height is the band tier, never a literal (rule #24 and `pnpm check:control-sizing`)."},{name:"--conversations-item-gap",value:"var(--space-inline-sm)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-padding-inline",value:"var(--space-inline-sm)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--conversations-item-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-color",value:"initial",description:"ROW STATE. Role-mirror knobs (docs/TOKENS.md): `initial` so the documented default resolves at the CALL SITE and a scoped `[data-tenant]` / `.dark` override still reaches it. Bound to a value here at `:root` each one would resolve once, against the root palette, and freeze. Default resting ink = hsl(var(--muted-foreground)) Default active ground = hsl(var(--accent)) Default active ink = hsl(var(--foreground))"},{name:"--conversations-item-active-background",value:"initial",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-active-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--conversations-item-active-color",value:"initial",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-item-active-font-weight",value:"var(--font-weight-medium)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-icon-size",value:"var(--icon-size-md)",description:"Leading glyph inside a row."},{name:"--conversations-line-gap",value:"var(--space-stack-xs)",description:"Gap between a row's label and its timestamp. The TIGHTEST stack step, because the two lines are one thing being read, not two stacked items \u2014 anything larger and the row reads as two rows in a rail that is already narrow."},{name:"--conversations-group-gap",value:"var(--space-1)",description:'BUCKET HEADING ("\u4ECA\u65E5" / "Previous 7 days").'},{name:"--conversations-group-padding-inline",value:"var(--space-inline-sm)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-group-chevron-size",value:"var(--icon-size-sm)",description:"Conversations component tokens \u2014 the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` \u2014 a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` \u2014 a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size"},{name:"--conversations-separator-space-block",value:"var(--space-1)",description:'The `{ type: "divider" }` rule between two runs.'},{name:"--accordion-chevron-size",value:"var(--icon-size-md)",description:'Accordion chevron and Carousel arrow. Both were bare 1rem literals in data-display-layout.css \u2014 glyphs with no tier-2 route, invisible to the icon ratchet because neither selector contains the word "icon".'},{name:"--carousel-arrow-icon-size",value:"var(--icon-size-md)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--carousel-arrow-size",value:"2rem",description:'THE ARROW\'S BOX, WHICH IS NOT THE SAME KNOB AS ITS GLYPH (gh#931). `--carousel-arrow-icon-size` sizes the mark INSIDE the button; the button itself was a pair of bare `2rem` literals in data-display-layout.css, so the TARGET had no tier-2 route at all. 32px clears WCAG 2.2 SC 2.5.8 (24px), which is why this is a missing knob and not a defect \u2014 but a brand whose own foundations ask for a 44px target could not reach it from a theme, and had no option left except a page-local override of a library selector. Reported from a real re-theme whose spec reads "arrows44px". The default is the same 2rem the literals painted, so no existing carousel moves. A theme that wants the larger target writes one line: `--carousel-arrow-size: 2.75rem`.'},{name:"--carousel-arrow-inset-block-start",value:"initial",description:'WHERE THE ARROWS SIT, AND THE DEFAULT IS THE MIDDLE OF THE CONTENT \u2014 NOT OF THE COMPONENT. `.ui-carousel` is the positioning context and it is as tall as the slides PLUS the dots, so a plain `50%` centres the arrows on that sum. Measured on a 98px carousel: slides 58px (middle at -3415), dots 40px, arrows landing at -3395 \u2014 exactly half the dots row too low, which is what "t\u1EA1i sao l\u1EA1i l\xE0 middle c\u1EE7a c\u1EA3 khung th\u1EBF" is pointing at. The reserve below subtracts it back. default = the content\'s middle, at the call site'},{name:"--carousel-dots-block-size",value:"0px",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--accordion-focus-ring-offset",value:"2px",description:"Outline-form ring gaps \u2014 a hugging ring would touch these marks (styles/focus-ring.css)."},{name:"--carousel-dot-focus-ring-offset",value:"2px",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"CodeBlock \u2014 a preformatted block; Prose delegates its `pre` treatment to the same knobs."},{name:"--code-block-font-size-xs",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-line-height",value:"var(--line-height-normal)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-space-inset",value:"var(--space-3)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--code-block-max-height-sm",value:"12rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-max-height-md",value:"20rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-max-height-lg",value:"32rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-foreground",value:"initial",description:"SYNTAX COLOURS (gh#784). Twelve knobs, named for Shiki's `createCssVariablesTheme` output so a highlighter's own vocabulary maps onto them one-for-one with no translation layer. WHY THE PACKAGE OWNS THESE AT ALL. `CodeBlock` is a surface and does not highlight \u2014 its own prop docs tell a consumer to bring a highlighter and pass its spans. But the consumer rules then close every route those spans could take colour from: `style` and `className` are both visual overrides, and an app stylesheet may declare no custom properties. So the documented path was unbuildable, which is a contradiction in this package's docs rather than a missing feature on the consumer's side. Every one is `initial` with its role default at the CALL SITE (docs/TOKENS.md \u2014 the `:root` freeze rule), so light and dark come from the roles rather than from a second palette here, and a service that wants its own scheme overrides the knob without touching the roles."},{name:"--code-block-token-comment-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-keyword-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-string-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-string-expression-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-function-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-constant-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-parameter-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-punctuation-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-link-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-inserted-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-deleted-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--code-block-token-changed-color",value:"initial",description:"`changed` is the TWELFTH name and it was missed on the first pass: gh#784's own list had eleven, I copied the list instead of the source, and shiki's theme-css-variables.ts emits twelve. It is reachable only through a CONTEXT diff (`diff -c`, `markup.changed.diff` = `^(!).*$`), which is why a unified-diff sample never produced it \u2014 a silent wrong answer rather than a missing nicety: a changed line rendered as ordinary foreground, losing the distinction the `!` marker exists to make. Reported by the consumer that tokenised all 17 grammars (gh#793)."},{name:"--prose-font-size",value:"var(--font-size-base)",description:"Prose \u2014 typography of rendered content. Heading sizes come from --heading-h1..h4, table cell measures from --table-cell-padding-*; these are the rhythm knobs."},{name:"--prose-font-size-sm",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-line-height",value:"var(--line-height-body)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-space-block",value:"var(--space-3)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-heading-space-block-start",value:"var(--space-6)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-list-space-inline",value:"var(--space-6)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-list-item-space",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-quote-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--prose-quote-space-inline",value:"var(--space-3)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-code-font-size",value:"calc(1em / var(--font-size-ratio))",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-code-space-inline",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--prose-cell-image-max-inline-size",value:"20rem",description:"An image in a table cell is capped at a LENGTH, not at 100% (gh#1150): a percentage of an auto-width column lets the column squash the image to nothing, while a length makes the image's narrowest size min(natural width, this) \u2014 the table then scrolls in its box."},{name:"--prose-code-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--prose-link-color",value:"initial",description:"The link ink. `initial` \u2014 not `var(--primary)` \u2014 because the default IS a tenant-scoped role: a `:root` binding computes against the root's --primary and inherits that frozen value down, so a `[data-tenant]` re-tint never reaches it (docs/TOKENS.md, the freeze rule; gh#687). The default lives at the call site in styles/data-display-layout.css and re-resolves there. Until gh#717 `a` was the ONE styled descendant family in Prose with no knob at all \u2014 headings, lists, quote, code and image each had one \u2014 which left the most common element in a wiki body un-theme-able (#45). default = hsl(var(--primary))"},{name:"--prose-link-decoration-line",value:"underline",description:"Underlined at rest, same vocabulary as `--text-link-decoration-line`, and deliberately a SEPARATE knob rather than a mirror of it: `none` is legal for a link in a nav row or a card title, which is what that token governs, but Prose is running text \u2014 at the shipped inks the link differs from body copy by hue alone (1.87:1 light, 1.54:1 dark), and WCAG 1.4.1 \xB7 G183 needs 3:1 for colour to carry a link on its own (gh#664). A theme that drops the rule in chrome must not drop it here by accident."},{name:"--prose-image-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--timeline-note-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-background",value:"initial",description:"Avatar surface \u2014 `initial` so the --muted default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root; a scoped role override never reaches it). A service re-tints the placeholder fill once (e.g. --avatar-background: hsl(var(--accent))). Default = hsl(var(--muted))."},{name:"--avatar-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--avatar-tint",value:"transparent",description:"Optional role wash over the avatar (default transparent = invisible, rule #44). Painted as an overlay so a service sets --avatar-tint: hsl(var(--primary) / 0.08)."},{name:"--avatar-size",value:"var(--control-height)",description:'Avatar SIZE LADDER \u2014 `<Avatar size="xs|sm|md|lg">` (gh#716). The mark is a control-row citizen: it sits inside an `icon-sm` trigger, in a 24px dense table row, beside a Button on the same line. Before this ladder the box was welded to `--control-height`, so a 32px mark inside a 28px trigger OVERFLOWED it and the only legal move left to a consumer was to raise the whole row. Each step therefore reads the SAME `--control-height-*` tier every other control reads (never a px, never a calc offset), which is what makes `size="sm"` measure exactly as tall as `<Button size="sm">` on the same row. `md` is the default and is byte-identical to what shipped before, so nothing moves. `shape="square"` rides the same ladder: each step re-declares --avatar-square-size ON THE ELEMENT (not at :root \u2014 a calc/var over two custom properties is substituted where it is DECLARED, the trap written up in tokens/components/segmented.css), so the entity mark and the person mark are the same height at every step.'},{name:"--avatar-size-xs",value:"var(--control-height-xs)",description:"The 24px step \u2014 the mark that fits an `icon-xs` trigger and a 24px dense row."},{name:"--avatar-size-sm",value:"var(--control-height-sm)",description:'The 28px step \u2014 the mark that fits an `icon-sm` trigger and a `size="sm"` control row.'},{name:"--avatar-size-lg",value:"var(--control-height-lg)",description:'The 36px step \u2014 the mark for a `size="lg"` row (a list row\'s leading identity).'},{name:"--avatar-font-size",value:"var(--font-size-base)",description:"Initials TYPE per step \u2014 one step of the type scale per step of the box, so the two letters in a 24px mark are not the 14px set for a 32px one. The ratio holds (~0.44 of the box at every step), which is what keeps initials centred and legible rather than clipped."},{name:"--avatar-font-size-xs",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Initials in the 24px mark \u2014 one step below sm on the type scale."},{name:"--avatar-font-size-sm",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:'Initials in the 28px mark \u2014 the same step a `size="sm"` control\'s label reads.'},{name:"--avatar-font-size-lg",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Initials in the 36px mark \u2014 one step above the body step."},{name:"--avatar-glyph-size-xs",value:"calc(var(--icon-size-xs) * var(--scaling))",description:"Glyph box per step \u2014 the `--icon-size-*` scale the `Icon` primitive was minted on (gh#712), multiplied by --scaling exactly as --control-icon-size is, so a glyph inside a sized mark tracks density like every other control glyph. Only a SIZED avatar sizes its glyph: there is deliberately no global `.ui-avatar svg` rule, because it would out-rank the per-call-site icon classes existing avatars already carry."},{name:"--avatar-glyph-size-sm",value:"calc(var(--icon-size-sm) * var(--scaling))",description:"Glyph in the 28px mark \u2014 --icon-size-sm, the step --control-icon-size-sm also reads."},{name:"--avatar-glyph-size-lg",value:"calc(var(--icon-size-lg) * var(--scaling))",description:"Glyph in the 36px mark \u2014 --icon-size-lg."},{name:"--avatar-square-radius",value:"initial",description:'Entity-header mark \u2014 `<Avatar shape="square">` (gh#249): the compact rounded SQUARE an organization/service header uses, as opposed to the round person avatar. Every value is a knob (rule #45) so a service matches the mark to its own grid without a className override. --avatar-square-background / --avatar-square-foreground are role-mirror knobs: `initial` so the --primary / --primary-foreground defaults re-resolve at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding to a role var would freeze at the :root value). Defaults = --radius-lg corners \xB7 --control-height box (same as the circle avatar, so swapping shape never reflows a header) \xB7 hsl(var(--primary)) fill \xB7 hsl(var(--primary-foreground)) glyph. gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)'},{name:"--avatar-square-size",value:"var(--control-height)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-square-background",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-square-foreground",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-tinted-background",value:"initial",description:'Capability medallion \u2014 `<Avatar appearance="tinted">` (gh#12): the tinted plate a capability / feature glyph sits on, as opposed to the SOLID entity mark above. Pair it with shape="square" for the canonical rounded square. --avatar-tinted-background / --avatar-tinted-foreground are role-mirror knobs (`initial`, docs/TOKENS.md) so the --primary defaults resolve at the CALL SITE and a scoped [data-tenant]/.dark override of --primary reaches them \u2014 the exact reason this is a token and not the `hsl(var(--primary) / 0.1)` literal consumers were writing in page CSS. Defaults = hsl(var(--primary) / 0.1) wash \xB7 hsl(var(--primary)) glyph \xB7 --control-icon-size glyph box.'},{name:"--avatar-tinted-foreground",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-tinted-glyph-size",value:"var(--control-icon-size)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-size",value:"30%",description:'PRESENCE INDICATOR \u2014 `<Avatar presence="online|away|busy|offline">` (gh#309): the realtime reachability dot pinned to the block-end/inline-end corner of the mark. Every constant below is a knob (rule #45) and the separator ring is chrome that reads a token (rule #44), because the hand-rolled workaround this replaces \u2014 `bg-green-500 ring-2 ring-background -end-0.5 -bottom-0.5` on a wrapper span \u2014 bakes four service-tunable constants and a raw palette colour into a consumer page. --avatar-presence-size is a PROPORTION of the mark, not a px step. One value therefore tracks EVERY avatar the system paints \u2014 the --control-height default box, a `size-12` call site, the --avatar-square-size entity mark, --org-switcher-avatar-size (1.75rem), --upload-avatar-size (6rem), the 36px ListRow density="compact" leading mark \u2014 instead of freezing one diameter that is a boulder on a 24px mark and a speck on a 96px one. --avatar-presence-min-size is the legibility floor for the smallest marks; --avatar-presence-inset lets a service pull the dot further into a round mark than into a square one. --avatar-presence-ring-color and the four state colours are ROLE-MIRROR knobs: declared `initial` here so the --background / --success / --warning / --destructive / --muted-foreground defaults resolve at the CALL SITE and a scoped [data-tenant] / .dark override of the ROLE still reaches them (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Binding them to the role here would freeze the ring light-mode-white on a dark avatar. Presence is never colour-alone (WCAG 1.4.1): the colour rides with a SHAPE \u2014 filled \xB7 half filled \xB7 barred \xB7 hollow \u2014 and a localized sr-only string, so --avatar-presence-stroke-width and --avatar-presence-bar-* are part of the accessible encoding, not decoration. Defaults = 30% of the mark, floor 0.5rem \xB7 flush with the mark\'s corner \xB7 2px separator ring in --background \xB7 1.5px state stroke \xB7 a 56%-wide, 1.5px dnd bar.'},{name:"--avatar-presence-min-size",value:"var(--space-2)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-inset",value:"0",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-ring-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--avatar-presence-stroke-width",value:"initial",description:"default = var(--stroke-sm), resolved at the call site (gh#906)"},{name:"--avatar-presence-bar-inline-size",value:"56%",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-bar-block-size",value:"initial",description:"default = var(--stroke-sm), resolved at the call site (gh#906)"},{name:"--avatar-presence-ring-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-online-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-away-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-busy-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--avatar-presence-offline-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-track-background",value:"initial",description:"Progress track + fill \u2014 `initial` so the role defaults re-resolve under a scoped theme. Track reads --secondary, fill reads --success; a service re-tones once. Defaults = hsl(var(--secondary)) track \xB7 hsl(var(--success)) fill."},{name:"--progress-track-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--progress-fill-background",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-breakdown-block-size",value:"1.375rem",description:"BREAKDOWN geometry (`segments`) \u2014 its own block size and corner, not the meter's. A 0.5rem pill carries ONE fill legibly; three abutting fills at that height read as a coloured hairline and the ratios stop being comparable, which is the only thing a breakdown is for. The corner follows --radius rather than --radius-pill: pill ends would round the first and last slice only, so the partition would look like it starts and stops somewhere other than where it does."},{name:"--progress-breakdown-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--progress-meter-block-size",value:"0.5rem",description:'`size="sm"` \u2014 the SAME two forms, thinner, for a bar that annotates a row rather than being the subject of the screen (an in-table capacity column). The meter step is half its default hairline; the breakdown step lands exactly on the meter\'s default 0.5rem, which is the thinnest a partition can be and still show three fills apart. Below that the ratios are gone, which is why there is no `xs`.'},{name:"--progress-meter-block-size-sm",value:"0.25rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-breakdown-block-size-sm",value:"0.5rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-ring-size",value:"2.75rem",description:'RING geometry (`shape="ring"`) \u2014 the SAME meter, drawn as an arc. The diameter is a control tier rather than a new scale: a ring lives beside a title in an app bar, so it has to sit level with the controls around it the way the bar does. The stroke is the emphasis stroke (`--stroke-lg`), thick enough that the arc reads as a quantity at 2.75rem rather than as a hairline outline; `sm` keeps the same stroke on a smaller circle, because a thinner arc at a smaller diameter stops being readable as a proportion at all.'},{name:"--progress-ring-size-sm",value:"2rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--progress-ring-border-width",value:"initial",description:"default = var(--stroke-lg), resolved at the call site (gh#906)"},{name:"--progress-ring-label-font-size",value:"initial",description:'A KNOB, with the derivation at the CALL SITE \u2014 and the first attempt got this wrong. It was `--font-size-xs`, one value for every diameter, so a 32px `sm` ring carried the same 12.47px label as the 44px default and "18/42" measured 32.6px \u2014 wider than the ring, painting over the arc. "0/42" fits, which is why the demo looked correct. The fix was `calc(var(--progress-ring-size) * 0.28)` HERE, and that does not work: a custom property substitutes its var() where it is DECLARED, so this reads the `:root` diameter and freezes. Measured after that change \u2014 both the 44px and the 32px ring rendered a 12.32px label, i.e. the sm ring was not scaled at all and only `max-inline-size` was saving it. The same freeze rule this repo documents for `--ring` and the primary family, walked into while fixing something else. So it is `initial`, and the formula lives at the element that PAINTS it, where `--progress-ring-size` is whatever `[data-size="sm"]` last said. 0.28 reproduces the previous default (44 \xD7 0.28 = 12.3px \u2248 the 12.47 it replaces), so the md ring does not move.'},{name:"--legend-gap",value:"0.875rem",description:`Legend \u2014 the key for a colour-coded surface. Small chrome, so it carries its own rhythm rather than the stack scale: the swatch is a MARK the size of a character, not a control, and the gap that reads as "these two belong together" is tighter than any named step. scale-exempt: the legend's rhythm follows its TYPE (11-12px), not the layout space scale \u2014 --space-3 (12px) is close enough to the item gap that a swatch starts binding to the label on its left, and --space-4 (16px) breaks three keys into three objects.`},{name:"--legend-item-gap",value:"0.3125rem",description:"scale-exempt: half the swatch, so a mark and its label read as one word; derived from --legend-swatch-size, not from the layout scale."},{name:"--legend-swatch-size",value:"0.625rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--legend-swatch-radius",value:"0.125rem",description:"scale-exempt: --radius (6px) on a 10px square is 60% of the mark and reads as a DOT, a different symbol; this is the smallest corner that softens the square without becoming one."},{name:"--legend-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--legend-color",value:"initial",description:"`initial` so the muted role re-resolves at the call site under a scoped theme. Default = hsl(var(--muted-foreground))."},{name:"--swatch-size",value:"1rem",description:"Swatch \u2014 a read-only sample of ONE colour a person chose (gh#527). The mark is Legend's square, one step larger: a legend swatch rides an 11-12px label, while this one stands beside a NAME at body size, and at 0.625rem beside 14px type it reads as a bullet rather than as a sample of a colour."},{name:"--swatch-radius",value:"0.125rem",description:"scale-exempt: the same corner as --legend-swatch-radius \u2014 --radius (6px) on a 16px square reads as a DOT, a different symbol, and a sample and a key mark must be the same shape."},{name:"--swatch-border-width",value:"initial",description:"The hairline that keeps a white value visible on a white card. It is the resting border weight, not a decision of this component. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--swatch-border-color",value:"initial",description:"`initial` so the border role re-resolves at the call site under a scoped theme. Default = hsl(var(--border))."},{name:"--swatch-color",value:"hsl(var(--muted))",description:'The caller\'s colour \u2014 the only knob here that is PER-INSTANCE. swatch.tsx writes it inline on the element, and an inline declaration outranks this one, so this is the value only when the prop is empty. It has to be declared all the same: an undeclared custom property has no fallback to fall back TO, which is the failure check-dist-tokens-resolve.mjs exists to catch. `--muted` is the right default because an unset sample should read as "no colour recorded" rather than as a colour nobody chose.'},{name:"--feature-list-space-gap",value:"var(--space-stack-sm)",description:"Between statements: tight enough that the column reads as one list, loose enough that a two-line item does not merge with the next one."},{name:"--feature-list-space-inline",value:"var(--space-inline-sm)",description:"Glyph column \u2194 label."},{name:"--feature-list-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--feature-list-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--feature-list-mark-icon-size",value:"var(--icon-size-md)",description:"The glyph takes the same step a Button's icon takes, so a feature list beside a control tier reads at the same weight. The mark BOX is `1lh` in the stylesheet \u2014 deliberately not a token, because the one correct value is \"however tall this text's line is\"."},{name:"--thumbnail-block-size-sm",value:"4rem",description:"Thumbnail \u2014 a framed picture at a fixed height, intrinsic width. Three steps, chosen for the surfaces that asked for them rather than derived: an inline attachment strip, a gallery row, and a review screen. The `height` axis has no named scale in this library on purpose (see scripts/token-scale-bypass-rules.mjs \u2014 container heights barely repeat). 64px \u2014 an attachment chip beside its filename."},{name:"--thumbnail-block-size",value:"6rem",description:"96px \u2014 the default: a gallery row that still shows the shot."},{name:"--thumbnail-block-size-lg",value:"10rem",description:"160px \u2014 a review screen, where the picture IS the content."},{name:"--thumbnail-width-ratio",value:"4 / 3",description:"Image `size` frame: width = the Thumbnail height \xD7 this ratio."},{name:"--thumbnail-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--thumbnail-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--text-diff-removed-background-alpha",value:"0.12",description:"TextDiff (gh#1096) \u2014 the grounds under a removed and an added run. The INK stays the text colour: the mark that carries the meaning is the strike-through / underline plus a spoken label, so the tint only has to separate the run from its neighbours. The grounds read the status surface role (gh#866) and fall back to the tone at these alphas."},{name:"--text-diff-added-background-alpha",value:"0.16",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--text-diff-mark-line-width",value:"var(--stroke-hairline)",description:"The underline/strike weight \u2014 the resting hairline, so it survives forced-colors as ink."},{name:"--text-diff-space-gap",value:"var(--space-3)",description:"Space between the before and after columns in split mode, and around a folded run."},{name:"--text-diff-space-inset",value:"var(--space-2)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-dot-done-background",value:"initial",description:"Timeline accents \u2014 `initial` so the dot/line role defaults re-resolve under a scoped theme. ONE HUE down the whole progress column (gh#731): done, current and the travelled line all default to hsl(var(--primary)), the way Steps paints `finish` and `process`; current is told apart by its ring, not by a second role. To restore the pre-27.9 green/violet pairing, set the done dot's FILL and its INK together \u2014 the two roles have opposite ink polarity, so the fill alone leaves a near-white glyph on \u82E5\u7AF9 green at 2.19:1 (gh#643): --timeline-dot-done-background: hsl(var(--success)); --timeline-dot-done-foreground: hsl(var(--success-foreground));"},{name:"--timeline-dot-done-foreground",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-dot-current-background",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-line-completed-background",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-dot-current-ring-width",value:"initial",description:"The current dot's ring is the ONLY chromatic difference from a done dot, so it is `--steps-dot-process-ring-width` token-for-token \u2014 the same ring, meaning the same thing. default = var(--stroke-xl), resolved at the call site (gh#906)"},{name:"--timeline-item-gap",value:"initial",description:'Space between items and between rail and body. `initial` so `Timeline density="compact"` can retune it on the root; default = var(--space-stack-md), compact = --timeline-item-gap-compact (default var(--space-stack-sm)), resolved at the call site.'},{name:"--timeline-item-gap-compact",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-foreground",value:"0 0% 0%",description:"QR codes stay scanner-safe in light and dark application themes. Consumers may override these component tokens only when the resulting pair retains strong contrast."},{name:"--qr-code-background",value:"0 0% 100%",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-size-xs",value:"6rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-size-sm",value:"8rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-size-md",value:"10rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--qr-code-size-lg",value:"12.5rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-hour-height",value:"2.5rem",description:"TIMELINE GRID \u2014 the time-axis half of the Timeline family (#354 item 7). Every measure the hand-rolled week grids in docs/showcase baked as a literal is a knob here: the height of one hour is what a service tunes when a 24-hour axis has to fit one screen, and the column floor is what decides when the grid scrolls instead of collapsing into slivers. --timeline-grid-hour-height is a RAW rem on the unenforced height axis: it is a rhythm the consumer picks per surface (a 6-hour shift board wants a taller hour than a 24-hour one), not a step of the spacing scale."},{name:"--timeline-grid-axis-width",value:"3.25rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-column-min-width",value:"6rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-min-height-minutes",value:"36",description:"S\xE0n hi\u1EC3n th\u1ECB c\u1EE7a m\u1ED9t kh\u1ED1i s\u1EF1 ki\u1EC7n, t\xEDnh b\u1EB1ng PH\xDAT ch\u1EE9 kh\xF4ng b\u1EB1ng pixel. \u0110\xE2y l\xE0 NGU\u1ED2N DUY NH\u1EA4T: CSS suy chi\u1EC1u cao t\u1ED1i thi\u1EC3u t\u1EEB n\xF3, v\xE0 thu\u1EADt to\xE1n x\u1EBFp l\xE0n c\u0169ng d\xF9ng \u0111\xFAng con s\u1ED1 n\xE0y \u0111\u1EC3 bi\u1EBFt hai kh\u1ED1i c\xF3 \u0111\xE8 nhau tr\xEAn m\xE0n h\xECnh hay kh\xF4ng. N\u1EBFu \u0111\u1EC3 s\xE0n b\u1EB1ng pixel th\xEC thu\u1EADt to\xE1n t\xEDnh theo th\u1EDDi gian c\xF2n CSS l\u1EA1i k\xE9o chi\u1EC1u cao l\xEAn, v\xE0 hai ca kh\xF4ng tr\xF9ng gi\u1EDD v\u1EABn v\u1EBD ch\u1ED3ng."},{name:"--timeline-grid-axis-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-head-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-gap",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-space-inset",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--timeline-grid-event-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--timeline-grid-now-width",value:"initial",description:"default = var(--stroke-sm), resolved at the call site (gh#906)"},{name:"--timeline-grid-line-color",value:"initial",description:"Role-mirror knobs (docs/TOKENS.md): `initial` so the defaults re-resolve at the CALL SITE and a scoped [data-tenant]/.dark override of the role still reaches them. Defaults = hsl(var(--border)) hour rules \xB7 hsl(var(--primary)) block accent \xB7 hsl(var(--destructive)) now marker \xB7 hsl(var(--primary)) current-column wash."},{name:"--timeline-grid-event-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-event-muted-color",value:"hsl(var(--foreground))",description:"Ch\u1EEF ph\u1EE5 trong kh\u1ED1i s\u1EF1 ki\u1EC7n n\u1EB1m tr\xEAn n\u1EC1n \u0110\xC3 T\xD4 theo m\xE0u c\u1EE7a b\xEAn ti\xEAu th\u1EE5, n\xEAn --muted-foreground v\u1ED1n hi\u1EC7u ch\u1EC9nh cho n\u1EC1n trang kh\xF4ng c\xF2n \u0111\u1EE7 t\u01B0\u01A1ng ph\u1EA3n: \u0111o \u0111\u01B0\u1EE3c 4,24 tr\xEAn n\u1EC1n t\xF4 12%, d\u01B0\u1EDBi ng\u01B0\u1EE1ng 4,5 m\xE0 c\u1EE1 ch\u1EEF n\xE0y \u0111\xF2i. M\u1EB7c \u0111\u1ECBnh d\xF9ng ch\xEDnh m\xE0u ch\u1EEF ch\xEDnh, th\u1EE9 b\u1EADc do \u0111\u1ED9 \u0111\u1EADm c\u1EE7a ti\xEAu \u0111\u1EC1 \u0111\u1EA3m nhi\u1EC7m; m\u1ED9t service bi\u1EBFt b\u1EA3ng m\xE0u c\u1EE7a m\xECnh c\xF3 th\u1EC3 d\u1ECBu l\u1EA1i."},{name:"--timeline-grid-now-color",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--timeline-grid-current-tint",value:"initial",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--permission-matrix-label-width",value:"16rem",description:"PERMISSION MATRIX \u2014 the sticky-first-column grid. Nothing here was themeable: the class `.ui-permission-matrix` existed as a bare hook with no CSS rule at all, so every constant lived on the component (#319). A JA/VI service whose role names run longer than the English ones could not widen the label column without forking."},{name:"--permission-matrix-role-space-gap",value:"var(--space-1)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--permission-matrix-name-space-gap",value:"0.375rem",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--permission-matrix-cell-icon-size",value:"var(--control-icon-size)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--permission-matrix-min-width",value:"48rem",description:"Floor for the scrolling body \u2014 below this the columns collapse into unreadable slivers, so the table scrolls instead. Mirrors --table-surface-min-inline-size on DataTable."},{name:"--range-timeline-label-width",value:"var(--app-shell-sidebar-width)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-unit-width",value:"var(--range-timeline-unit-width-default)",description:"Floor for ONE axis unit, so a day column never collapses; the live knob the canvas reads. `density` re-points it per instance at the three steps below \u2014 set THIS one in a theme to move every step's baseline, set a step to retune one density."},{name:"--range-timeline-unit-width-compact",value:"calc(var(--control-height-sm) * 1.5)",description:"Day-column steps on the `density` axis (gh#730). `default` is the shipped 56px, unchanged, so no existing Gantt moves; `compact` is 1.5 control-sm (42px), which leaves a 24px content box \u2014 measured, the widest two-digit day label across the ja/en/vi/ar/fa/hi/th/bn numbering systems is 19.86px (Thai \u0E52\u0E57), so the tick still fits; `comfortable` is 2.5 (70px) for a wide screen. Multiples of --control-height-sm, never literals, so the axis follows the global density/scaling factor too."},{name:"--range-timeline-unit-width-default",value:"calc(var(--control-height-sm) * 2)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-unit-width-comfortable",value:"calc(var(--control-height-sm) * 2.5)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-row-height",value:"var(--control-height-lg)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-bar-height",value:"var(--control-height-sm)",description:"Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--range-timeline-border-color",value:"var(--border)",description:"The OUTER FRAME of the timeline and its label-column divider \u2014 the --border tier, the same rule weight a Card edge and a DataTable row use. The grid INSIDE it now reads the same tier (see --range-timeline-grid-color), which is the point of gh#730: the day grid may never be heavier than the frame around it, and at one tier it cannot become so under any theme."},{name:"--range-timeline-grid-color",value:"initial",description:"Body grid (`RangeTimeline bordered`, on by default): row rules, the header rule and a vertical rule per column down the whole body. Colour `initial` on purpose \u2014 the role default is read at the call site as `var(--range-timeline-grid-color, hsl(var(--border)))` so it follows a scoped theme. The --border tier: L* 93.80 / contrast 1.149 on the card in light, L* 20.76 / 1.270 in dark \u2014 identical to the outer frame and to a DataTable row rule, which is the whole point. Asked for three times: 25.3.0 drew the grid at all, 27.6.0 lightened the full --input (3.47) to --input/0.5 (1.74, L* 78.67), and gh#730 reported that still darker than the --border (L* 93.80) every card and table uses, so the eye followed the grid instead of the bars. Set any colour to retint, e.g. `hsl(var(--input) / 0.5)` for the 27.6.0 weight."},{name:"--range-timeline-grid-width",value:"initial",description:"Weight of every grid rule, header column rules included, so header and body stay aligned. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--range-timeline-muted-column-background",value:"initial",description:"Fill for `columns[].muted` (a non-working day), full body height. `initial`; call-site default `hsl(var(--muted))`, the header's own surface, so a muted column reads as part of the axis."},{name:"--range-timeline-indent-width",value:"var(--space-4)",description:"Label-column indent per `rows[].depth` level (gh#724). The label column keeps its width."},{name:"--record-picker-list-max-block-size",value:"22rem",description:"RecordPicker \u2014 chi\u1EC1u cao T\u1ED0I \u0110A c\u1EE7a danh s\xE1ch trong Dialog (gh#932). M\u1ED9t h\u1EB1ng s\u1ED1 \u1EDF \u0111\xE2y l\xE0 th\u1EE9 kh\xF4ng theme n\xE0o v\u1EDBi t\u1EDBi: m\u1ED9t service d\xF9ng h\xE0ng d\xE0y h\u01A1n, ho\u1EB7c m\u1ED9t Dialog cao h\u01A1n, c\u1EA7n \u0111\u1ED5i \u0111\u01B0\u1EE3c con s\u1ED1 n\xE0y m\xE0 kh\xF4ng ph\u1EA3i \u0111\xE8 selector c\u1EE7a th\u01B0 vi\u1EC7n."},{name:"--record-picker-suggest-max-block-size",value:"14rem",description:"Danh s\xE1ch g\u1EE3i \xFD d\u01B0\u1EDBi \xF4 inline (gh#944) \u2014 ng\u1EAFn h\u01A1n danh s\xE1ch trong Dialog, v\xEC n\xF3 n\u1EB1m TRONG d\xF2ng ch\u1EA3y c\u1EE7a form ch\u1EE9 kh\xF4ng ph\u1EA3i trong m\u1ED9t l\u1EDBp ph\u1EE7 ri\xEAng."},{name:"--password-strength-score-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-entry component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--password-strength-checklist-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Data-entry component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--branch-scope-picker-gap",value:"0.75rem",description:"Stack rhythm between the mode radios, the subset box and the error line (was `gap-3`)."},{name:"--branch-scope-picker-badges-gap",value:"0.375rem",description:"Read-only summary: the wrapped run of branch Badges (was `gap-1.5`)."},{name:"--branch-scope-picker-subset-gap",value:"0.5rem",description:'The `mode="selected"` subset box \u2014 its inner stack rhythm and the inset that clears its indent rule (was `gap-2` / `ps-4`).'},{name:"--branch-scope-picker-subset-padding-inline",value:"1rem",description:"Data-entry component tokens \u2014 small-by-design text knobs (rule #45/#46)."},{name:"--branch-scope-picker-subset-border-width",value:"initial",description:"The indent rule itself is CHROME (#44), so it is a knob: a service that wants the flat treatment sets it to 0 rather than forking the component. Default = today's `border-s-2`. default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--branch-scope-picker-list-max-height",value:"16rem",description:"Bounded height of the scrollable branch list (was `max-h-64`). Flat by design: the box is a keyboard-reachable scroll region whose job is to cap the control's measure, so it must not grow with density and push the surrounding form off a 390px frame."},{name:"--descriptions-label-width",value:"8rem",description:'Width of the label column when <Descriptions layout="horizontal">. Labels align to this shared column so the values line up (the horizontal-detail look, mirroring <Form layout>). A rem value gives a fixed aligned column; set `max-content` to size each label to its text. (rule #44/#45 \u2014 a service theme tunes it here instead of forking CSS.)'},{name:"--descriptions-row-gap",value:"var(--space-3)",description:"Row-to-row gap (gh#294). Default = the historical hardcoded `gap-y-3`, so nothing changes visually by default. A consumer composing Descriptions beside a Form/FormField (a read-only block above an editable field on the same card) retunes this to `var(--space-4)` to match Form's own field-to-field rhythm instead of the two blocks reading as visually unrelated."},{name:"--descriptions-column-gap",value:"1.5rem",description:"Column-to-column gap of the <dl> grid (#319). Was a hardcoded `gap-x-6`, the one axis of the grid rhythm a service could NOT reach while --descriptions-row-gap was already a knob \u2014 so a 2/3-column detail block could be retuned vertically but never horizontally. A RAW rem, deliberately NOT var(--space-6): `gap-x-6` reads Tailwind's own --spacing grid, which this repo does NOT density-scale, so a --space-* default would silently rescale the column gap under a compact/comfortable density. Point it at var(--space-6) to opt in."},{name:"--descriptions-label-gap",value:"0.75rem",description:'Label \u2192 value gap inside ONE item when layout="horizontal" (was `gap-x-3`). Pairs with --descriptions-label-width: a service that narrows the label column usually wants to close this gap in the same step. Raw rem for the same --spacing reason as above.'},{name:"--descriptions-value-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"VALUE TYPOGRAPHY (gh#294 + #319). `FormField staticText` renders its read-only value with the SAME typography as a <dd> so a static Form row and a Descriptions value are indistinguishable when mixed on one card. That contract used to be two copies of the literal `text-sm` plus a comment asking future editors to keep them in sync; both call sites now read these tokens, so the mirror is mechanical and a service retunes BOTH from one place."},{name:"--descriptions-value-line-height",value:"calc(1.25 / 0.875)",description:"Companion to --descriptions-value-font-size (the gh#260 bug). The `text-sm` utility this replaces ALSO set a line-height, via Tailwind's default `--text-sm--line-height` (= calc(1.25 / 0.875)); the theme remaps --text-sm but never that companion. Without this the value would silently inherit ambient leading instead of its own 20px line box."},{name:"--descriptions-label-font-size",value:"var(--descriptions-value-font-size)",description:"LABEL TYPOGRAPHY. The label was a hard-coded `text-xs` utility while the value beside it read a token, so the pair sat ONE TYPE STEP APART (`--font-size-xs` \u224812.5px against `--font-size-sm`, which IS `--font-size-base` at 14px) and every row rendered its value BIGGER than its own label. What separates a label from its value is COLOUR, not size. The LABEL is raised to the value's step rather than the value shrunk to the label's: the value is the DATA, and shrinking it would move every consumer's field panel and `FormField staticText` with it. Defaulting to the value token locks the pair together by construction while leaving each side reachable. Measured by check:descriptions-label-value-step."},{name:"--descriptions-label-line-height",value:"var(--descriptions-value-line-height)",description:"Companion, for the same reason the value has one (gh#260): the `text-xs` utility this replaces ALSO carried a line-height, so dropping it without a replacement would leave the label inheriting ambient leading instead of its own line box."},{name:"--descriptions-row-border",value:"none",description:"ROW CHROME (gh#414) \u2014 the ruled property panel. Both knobs are QUIET by default (rule #44), so an existing Descriptions is byte-identical: no rule, no band height. Same shape as --page-header-divider / --page-toolbar-divider / --page-footer-divider on PageContainer: a `border` shorthand a service opts into with ONE declaration (`--descriptions-row-border: var(--stroke-hairline) solid hsl(var(--border))`), read at the call site. Bound at :root rather than `initial` because the default is a plain CSS keyword, not another role token \u2014 there is nothing for a scoped [data-tenant]/.dark override to re-resolve, and the keyword is worth reading here (the same reasoning --page-toolbar-background records). The rule is drawn only on an UNBORDERED grid: `bordered` already draws a rule between every cell, and a second block-end border would double every line it owns. --descriptions-row-min-height gives the ruled variant its band height \u2014 a ruled row whose value is one short line otherwise reads as a hairline sandwich. `auto` = today. A continuously ruled panel sets --descriptions-row-gap to `0` in the same declaration block: the row gap is the space BETWEEN rules, so leaving it at the default 12px draws a ladder of detached hairlines rather than a ruled list."},{name:"--descriptions-row-min-height",value:"auto",description:"Descriptions component tokens."},{name:"--descriptions-border-width",value:"initial",description:"BORDERED grid (antd `bordered`). The rule between cells and the frame around them. Width is a stroke step so a service that thickens every hairline gets this one with it; colour is deliberately left to the global `border-color` role so a scoped [data-tenant] override still reaches it. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--descriptions-border-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--descriptions-cell-padding-y",value:"var(--space-2)",description:"Inset inside one bordered cell. Only read while `bordered` is set \u2014 an unbordered Descriptions has no cell box to pad, and gains nothing."},{name:"--descriptions-cell-padding-x",value:"var(--space-3)",description:"Descriptions component tokens."},{name:"--descriptions-label-background",value:"initial",description:"Shaded label cell, the half of antd's bordered table that makes the pairs readable at a glance. `initial` so the --muted default re-resolves under a scoped theme. Default = hsl(var(--muted))."},{name:"--draggable-panel-inset",value:"var(--space-6)",description:"Resting inset from the viewport edge at the panel's placement corner."},{name:"--draggable-panel-offset-x",value:"0",description:"Applied offset from that corner, in CSS pixels. Written by the component."},{name:"--draggable-panel-offset-y",value:"0",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-step-offset",value:"var(--space-2)",description:"Keyboard nudge, one arrow press. Shift takes the larger step (WCAG 2.1.1 path)."},{name:"--draggable-panel-step-offset-lg",value:"var(--space-10)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-width-sm",value:"18rem",description:"Width ladder. A floating assistant is a column of text, so these are reading measures."},{name:"--draggable-panel-width",value:"22rem",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-width-lg",value:"28rem",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-width-xl",value:"var(--centered-shell-width-md)",description:"xl: nearest wide-content tier on the shell measure ladder (gh#607), not a one-off 46rem."},{name:"--draggable-panel-block-size",value:"auto",description:"Definite height when set; `auto` keeps the pre-607 shrink-to-content behaviour."},{name:"--draggable-panel-max-block-size",value:"70vh",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--draggable-panel-shadow",value:"var(--shadow-lg)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--draggable-panel-bar-padding",value:"var(--space-2) var(--space-3)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-bar-gap",value:"var(--space-2)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-body-padding",value:"var(--space-4)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--draggable-panel-handle-size",value:"var(--control-affix-icon-size)",description:"DRAGGABLE PANEL \u2014 a floating, movable surface (gh#560). Geometry only. The two offset knobs are written by the component as UNITLESS numbers and multiplied by 1px in `styles/layout.css`, which is how a JS-computed position reaches CSS without a literal in the TSX (`check:no-inline-magic-numbers`)."},{name:"--email-shell-width",value:"480px",description:"\u2500\u2500 Shell \u2014 the 480px transactional-email geometry \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 canonical transactional card width"},{name:"--email-shell-padding",value:"32px",description:"card inset \u2014 mirrors --space-8 (2rem)"},{name:"--email-shell-page-padding",value:"24px",description:"gutter between the client viewport and the card (--space-6)"},{name:"--email-shell-border-width",value:"1px",description:"card edge \u2014 mirrors the 1px --border hairline"},{name:"--email-card-radius",value:"10px",description:"mirrors --card-radius (--radius-xl = 6px \xD7 \u03C6 \u2248 10px)"},{name:"--email-card-reference-height",value:"407px",description:"canonical invitation reference measures 480\xD7407"},{name:"--email-stack-gap",value:"24px",description:"block rhythm \u2014 mirrors --space-stack-lg (1.5rem)"},{name:"--email-stack-gap-sm",value:"12px",description:"tight rhythm \u2014 mirrors --space-3 (0.75rem)"},{name:"--email-mark-width",value:"22px",description:'The mark ARTWORK is the same 32\xD732 capsule + glyph `<Logo mark="godx" />` paints; only the RENDERED BOX differs. The canonical SCR-302 header sets it at 22px next to a 13px/700 "GoDX" wordmark, which is smaller than the web --logo-godx-size (2rem) \u2014 an email header carries the identity, not the navigation, so the lockup sits quieter (gh#250). canonical SCR-302 header lockup mark box'},{name:"--email-mark-height",value:"22px",description:"EMAIL component tokens \u2014 the geometry/typography half of the transactional-email contract (`@godxjp/ui/email`). HTML email cannot read CSS custom properties: Outlook/Gmail strip <style> blocks and require LITERAL inline values, so a Blade/Twig/MJML template can never `var()` these. They still live in the component tier because this is the ONE source a maintainer edits \u2014 the `@godxjp/ui/email` export is GENERATED from this file plus the colour roles in foundation.css (scripts/gen-email-tokens.mjs), so an email template and a web screen can never drift apart. Every value is a LITERAL px/number (never rem, never calc, never var): email clients resolve neither the cascade nor relative units reliably, and the export must serialise to a plain hex/px string. Where a value mirrors a web token the comment names it, so a retune stays traceable. Colours are deliberately NOT redeclared here \u2014 they derive from the semantic roles (--card/--background/--foreground/--muted/--border/--primary/--ring/--brand) and are converted HSL\u2192hex at module load, so a re-themed role re-tints the email with zero copy-paste. The identity mark reads --brand, NOT --success: --success is the wakatake status green, and the two are deliberately distinct roles (gh#250)."},{name:"--email-mark-gap",value:"8px",description:"mark \u2194 wordmark \u2014 mirrors --logo-wordmark-gap (--space-2)"},{name:"--email-wordmark-font-size",value:"13px",description:"canonical wordmark size (\u2248 --font-size-xs 12.5px)"},{name:"--email-wordmark-font-weight",value:"700",description:"mirrors --logo-wordmark-font-weight"},{name:"--email-font-family-sans",value:'"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, "M PLUS 2", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Arial, sans-serif',description:'The DXS canonical face is Noto Sans JP (see src/styles/fonts.css; product override, direct instruction). Email clients honour NO @font-face, so the stack ships the face NAME first and degrades through the platform JP faces to a generic \u2014 a client with Noto Sans JP installed (or a webmail that already loaded it, which is common \u2014 it is a widely preinstalled/CDN-cached Google face, more likely to actually render than the niche M PLUS 2 ever was) renders the canonical face, everything else lands on Hiragino (macOS/iOS) \u2192 Yu Gothic (Windows) \u2192 M PLUS 2 \u2192 Meiryo \u2192 the system UI face \u2192 Arial \u2192 sans-serif. Family names are SINGLE-quoted on export (the generator normalises) because an inline `style="\u2026"` attribute is double-quoted; only ASCII aliases are listed, since a non-ASCII family name does not survive every transfer encoding.'},{name:"--email-font-family-mono",value:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",description:"Tabular/reference strings \u2014 invoice ids, masked card numbers, ISO dates, amounts \u2014 are set in the mono face in the canonical card. Mirrors --font-family-mono."},{name:"--email-body-font-size",value:"14px",description:"mirrors --font-size-base (0.875rem)"},{name:"--email-body-line-height",value:"1.9",description:"1.9, NOT the web --line-height-body (1.7) \u2014 the canonical email card runs its JP body copy looser than a screen, because a mail client gives the reader no density control."},{name:"--email-body-font-weight",value:"400",description:"mirrors --font-weight-normal"},{name:"--email-heading-font-size",value:"17px",description:"canonical card title (\u2248 --heading-h2, base \xD7 \u03C6^\xBC\xB2 \u2248 17.6px)"},{name:"--email-heading-line-height",value:"1.7",description:"the title shares the card's body leading, not a tight ramp"},{name:"--email-heading-font-weight",value:"500",description:"mirrors --font-weight-medium \u2014 an email title is calm, not bold"},{name:"--email-cta-height",value:"44px",description:`TOUCH TARGET, deliberately DECOUPLED from --control-height-lg (36px). Do not "restore" the mirror: email is a mobile-first, touch-only medium. There is no hover state, no precise pointer, and mail clients do not reliably offer zoom or a focus affordance \u2014 so the web's AA floor (SC 2.5.8, 24x24, which 36px clears) is the wrong bar here. 44px is the AAA target size (SC 2.5.5, 44x44) and the Apple HIG 44pt / Material 48dp convention. A service that must keep the old box sets --email-cta-height + --email-cta-line-height in its own theme.`},{name:"--email-cta-line-height",value:"44px",description:"equal to the height: bulletproof vertical centring in Outlook"},{name:"--email-cta-padding-x",value:"16px",description:"mirrors --space-4"},{name:"--email-cta-radius",value:"6px",description:"mirrors the --radius base (0.375rem)"},{name:"--email-cta-font-size",value:"14px",description:"mirrors --font-size-base"},{name:"--email-cta-font-weight",value:"500",description:"mirrors --font-weight-medium"},{name:"--email-footer-font-size",value:"11px",description:"\u2500\u2500 Legal footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 mirrors --font-size-2xs (base \xF7 \u03C6^\xBC\xB2 \u2248 11.1px)"},{name:"--email-footer-line-height",value:"1.8",description:"the legal band runs looser than the web --line-height-normal"},{name:"--email-footer-link-gap",value:"12px",description:"horizontal separation between footer links (--space-3)"},{name:"--email-footer-padding-top",value:"20px",description:"space above the legal band"},{name:"--email-footer-border-width",value:"1px",description:"the hairline above the legal band"},{name:"--email-focus-border-width",value:"2px",description:"\u2500\u2500 Focus affordance (webmail preview panes that DO honour :focus) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 mirrors --focus-ring-width"},{name:"--email-mobile-max-width",value:"520px",description:"\u2500\u2500 Mobile reflow \u2014 applied under the narrow media query and by inline fallbacks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 the reflow breakpoint (card width + both gutters)"},{name:"--email-mobile-width",value:"100%",description:"the card goes fluid below the breakpoint"},{name:"--email-mobile-padding",value:"20px",description:"reduced card inset \u2014 mirrors --space-5"},{name:"--email-mobile-page-padding",value:"12px",description:"reduced viewport gutter \u2014 mirrors --space-3"},{name:"--email-mobile-heading-font-size",value:"16px",description:"One step below the 17px desktop title. The canonical 390px reference raster is unusable (it is 435px wide and already clips the card \u2014 dxs-platform/platform#496), so this is the library's documented contract rather than a measured canonical value."},{name:"--email-mobile-cta-width",value:"100%",description:"the CTA goes full-bleed so the tap target spans the card"},{name:"--error-surface-max-width",value:"32rem",description:"Measure of the surface block. Caps the status code + body + metadata column so a long ja/vi headline wraps at a readable width in BOTH shells, including the application shell where PageContainer is much wider than the copy wants to be."},{name:"--error-surface-gap",value:"var(--space-3)",description:"Rhythm between the status code, the EmptyState body, the metadata list and the progress meter."},{name:"--error-surface-padding-block",value:"var(--space-10)",description:"Block padding of the surface inside the shell it is placed in. Desktop (1440/1024) default; the 390 step steps it down so a phone loses no vertical space (see styles/shell-layout.css)."},{name:"--error-surface-padding-block-compact",value:"var(--space-6)",description:"ErrorSurface \u2014 the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251). Package-owned geometry: a service retunes the surface here (or in its own theme.css) instead of forking `.ui-error-surface` or adding a `className` to the component. Chrome defaults are QUIET (cardinal rule #44): the metadata block ships with no divider \u2014 a service opts IN."},{name:"--error-surface-brand-gap",value:"var(--space-2)",description:"Brand slot (a Logo) above the status code, system mode only."},{name:"--error-surface-meta-gap",value:"var(--space-1)",description:"Metadata description list: row rhythm and the label\u2194value gap inside one row."},{name:"--error-surface-meta-row-gap",value:"var(--space-2)",description:"ErrorSurface \u2014 the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251). Package-owned geometry: a service retunes the surface here (or in its own theme.css) instead of forking `.ui-error-surface` or adding a `className` to the component. Chrome defaults are QUIET (cardinal rule #44): the metadata block ships with no divider \u2014 a service opts IN."},{name:"--error-surface-meta-border",value:"none",description:"Chrome, default quiet (#44). A service opts in with `--error-surface-meta-border: var(--stroke-hairline) solid hsl(var(--border));`."},{name:"--error-surface-meta-padding-block",value:"0",description:"ErrorSurface \u2014 the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251). Package-owned geometry: a service retunes the surface here (or in its own theme.css) instead of forking `.ui-error-surface` or adding a `className` to the component. Chrome defaults are QUIET (cardinal rule #44): the metadata block ships with no divider \u2014 a service opts IN."},{name:"--error-surface-progress-max-width",value:"18rem",description:"Width of the maintenance progress meter \u2014 narrower than the measure, so it reads as metadata rather than as the primary content of the page."},{name:"--sheet-width-default",value:"22.5rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-overlay-background",value:"initial",description:"Overlay scrims \u2014 `initial` so the shared semantic --overlay-background re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding to it freezes at :root and a scoped override never reaches the overlay). Each surface takes a SHARE of that one scrim rather than a private literal, so a service retints every backdrop with one --overlay-background while the calibrated per-surface depth survives: a slide-in Sheet washes the page more lightly than a modal Dialog. Defaults resolve to rgb(0 0 0 / 0.2) (sheet) and rgb(0 0 0 / 0.3) (dialog)."},{name:"--sheet-overlay-alpha",value:"40%",description:'A SHARE OF `--overlay-background`, NOT THE RESULTING ALPHA (gh#886). The base is a finished colour that already carries `/0.5`, so `40%` composites to **0.20**, and a theme author who sets `62%` gets 0.31. That is the library-wide convention for a `--*-alpha` knob in the `color-mix(in srgb, <base> <alpha>, transparent)` share form \u2014 100% means "the base as authored", 0% means gone \u2014 and it is deliberate: the calibrated depth lives ONCE in `--overlay-background` so a service retints every scrim with one line. Want an absolute opacity instead? Set `--sheet-overlay-background` directly; it wins outright. Pinned by src/styles/__tests__/overlay-alpha-share-886.test.ts. 40% of rgb(0 0 0 / 0.5) = rgb(0 0 0 / 0.20)'},{name:"--sheet-overlay-backdrop-blur-size",value:"initial",description:"GLASS \u2014 ON THE SCRIM, for the same two reasons the dialog's note below spells out. A drawer covers content that must stay unreadable-but-present, so this is the surface whose blur does the most work, and the panel's own fill belongs at the OPAQUE end of the range (docs/GLASSMORPHISM-STANDARD.md \xA74). `initial` = no blur and no backdrop root. default = none \u2014 the scrim blurs nothing"},{name:"--sheet-surface-background",value:"initial",description:"THE PANEL FILL (gh#880 item 4). This was `bg-background` baked into the Sheet's own className, which is a Tailwind utility \u2014 `@layer utilities` outranks every component-layer rule, so the drawer's surface was not merely un-knobbed, it was unreachable by any rule this package could write. The utility is gone and `.ui-sheet-panel` paints from this knob instead; unset, the default resolves to the same `hsl(var(--background))` at the call site. default = hsl(var(--background)) at the call site"},{name:"--sheet-shadow",value:"initial",description:"`initial` + the ramp default at the call site \u2014 see --tooltip-shadow (gh#880 item 7). default = var(--shadow-lg), resolved at the call site"},{name:"--sheet-header-space-gap",value:"0.375rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-title-block-space-gap",value:"var(--space-1)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-title-row-space-gap",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-extra-space-gap",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-footer-space-gap",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-title-font-size",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-description-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-body-space-block",value:"var(--space-1)",description:"The scroll region keeps a sliver of padding so a focused control's ring is never clipped at the scroll edges \u2014 retune together with --focus-ring-width."},{name:"--sheet-close-offset",value:"var(--space-4)",description:"Close button: offset from the panel corner, and the inline room the header reserves so a title never runs under it."},{name:"--sheet-close-rest-alpha",value:"0.7",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--sheet-header-close-space-inline-end",value:"var(--space-8)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-width-default",value:"32rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-viewport-inset",value:"1.5rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-overlay-background",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-overlay-alpha",value:"60%",description:'A SHARE OF `--overlay-background`, NOT THE RESULTING ALPHA (gh#886) \u2014 the miss that was reported, because this knob carried no note of its own and `60%` reads as "0.6". The base is a finished colour with `/0.5` baked in, so the product is **0.30**, and `62%` gives 0.31 rather than the darker scrim that was asked for. See `--sheet-overlay-alpha` above for the convention and for the escape hatch: `--dialog-overlay-background` is an absolute colour and wins outright. Pinned by src/styles/__tests__/overlay-alpha-share-886.test.ts. 60% of rgb(0 0 0 / 0.5) = rgb(0 0 0 / 0.30)'},{name:"--dialog-overlay-backdrop-blur-size",value:"initial",description:"GLASS \u2014 THE BLUR IS ON THE SCRIM, NEVER ON THE DIALOG BOX (gh#880). Two reasons, and both are already written down in this repo. `backdrop-filter` filters what is painted BEHIND an element, and the scrim is the layer that covers the page, so the box would only ever blur the (flat) scrim. And an element with a `backdrop-filter` becomes the containing block for its fixed descendants, which would pin the dialog to itself \u2014 the trap `src/styles/shell-layout.css` documents where the app-launcher launchpad puts its blur on the overlay for exactly this reason. docs/GLASSMORPHISM-STANDARD.md \xA74 states the same rule. `initial` = no blur AND no backdrop root, so nothing about the shipped modal moves. The dialog's own translucency is `--dialog-surface-background` below, not a second blur. default = none \u2014 the scrim blurs nothing"},{name:"--dialog-surface-background",value:"initial",description:"THE PANEL FILL \u2014 a role-mirror knob, `initial`, default `hsl(var(--background))` at the call site (gh#880 item 4). `dialog-layout.css` hard-coded that colour, which made the modal one of the surfaces a theme could not make translucent at all: `--background` is a raw HSL triplet that is already composed with an alpha elsewhere, so a theme cannot add a second `/` to it. A whole colour here can. The panel's INK is stated on the same rule (`color: hsl(var( --foreground))`, gh#877) rather than inherited \u2014 a translucent fill over inherited text is how an invisible label ships, and that is the half of this surface that was already fixed. default = hsl(var(--background)) at the call site"},{name:"--dialog-space-x",value:"var(--space-chrome-x)",description:"Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the whole system, or --dialog-space-x/-y for dialogs only)."},{name:"--dialog-space-y",value:"var(--space-chrome-y)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-space-inset",value:"var(--dialog-space-y) var(--dialog-space-x)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-space-gap",value:"var(--space-stack-md)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-close-space-offset",value:"var(--space-4)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-header-space-gap",value:"var(--space-stack-xs)",description:"Dialog chrome rhythm (#319) \u2014 the exact mirror of the --sheet-* set above, because Dialog's header markup is byte-identical to Sheet's. --dialog-space-x/-y already governed the panel inset, but every gap INSIDE the chrome (header stack, title/subtitle pair, the extra-slot row) was a literal on the component, so a service could retune the outer padding and still be stuck with the inner rhythm. Defaults are the values the literals resolved to."},{name:"--dialog-title-row-space-gap",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-title-block-space-gap",value:"var(--space-1)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-extra-space-gap",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-confirm-icon-size",value:"var(--icon-size-xl)",description:"Confirm/alert leading icon (antd `Modal.confirm` parity). antd paints a 22px status glyph to the inline-start of the title and leaves the surface untinted; the icon IS the danger signal. 22px is not a step on the icon scale, so this rides --icon-size-xl (24px) \u2014 the nearest named step, and no new value enters the scale. The gap mirrors antd's 12px margin on the glyph."},{name:"--dialog-confirm-space-gap",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--dialog-header-close-space-inline-end",value:"var(--space-8)",description:"Inline room the header reserves so a long title or the extra slot never runs under the absolutely-positioned close button; retune together with --dialog-close-space-offset. Mirrors --sheet-header-close-space-inline-end."},{name:"--dialog-close-rest-alpha",value:"0.7",description:"Close button rest opacity \u2014 quiet at rest, full on hover (rule #44). Was a hard 0.7 baked into dialog-layout.css with no way for a theme to make the \u2715 louder. Mirrors --sheet-close-rest-alpha so the two overlay siblings retune together."},{name:"--dialog-close-size",value:"var(--touch-target-min)",description:"THE CLOSE BUTTON'S TARGET, WHICH IS NOT ITS PAINT (gh#806 \xB7 WCAG 2.2 SC 2.5.8 AA). The \u2715 glyph is --control-affix-icon-size (16px) and the button had nothing around it, so the button measured 16x16 and all four +-11px probes MISSED \u2014 measured on the real Dialog frame, not a fixture. A consumer's a11y gate had to exclude the selector, and rule #47 forbids them re-sizing it themselves. The paint must NOT grow: the \u2715 sits at a fixed offset from the panel corner and enlarging the glyph moves the optical weight of every overlay in the system. So the hit area is carried by a centred pseudo-element, the same answer `.ui-data-table-sort-button::after` already ships \u2014 verified there the same way (paint 53.1x17.8, all four probes HIT). Raisable because SC 2.5.8 is a floor, not a target: a touch-first service sets this higher."},{name:"--dialog-step-up-error-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Type-to-confirm challenge: the step-up failure line under the input. Its size + ink were `text-sm text-destructive` on the component, i.e. unreachable from a theme."},{name:"--alert-radius",value:"initial",description:"Alert corner radius (gh#268 \u2014 rule #45): a full-width Alert often sits in the same page column as a Card \u2014 so the DEFAULT IS the Card radius (gh#282); a service re-tunes by overriding this once. Default keeps the historical --radius-md. `initial`, not `var(--card-radius)` \u2014 a :root binding freezes (gh#888); default resolves at the call site. Default = var(--card-radius)."},{name:"--alert-space-inset",value:"var(--space-section-active)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-space-gap",value:"var(--space-inline-md)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-inner-space-gap",value:"var(--space-stack-sm)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-dismiss-space-offset",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-icon-size",value:"var(--icon-size-lg)",description:"Leading tone glyph (the \u26A0/\u2713/\u24D8 at the start of the strip). It was a bare `1.25rem` in alert-layout.css with no token at all, so the ONLY ways to resize it were `!important` or a forked stylesheet \u2014 the two things the icon axis's tier 2 exists to abolish (gh#326). Same step, so nothing moves; a service now scopes `--alert-icon-size` to one Alert instead. Deliberately NOT --scaling-multiplied: the literal it replaces did not track density."},{name:"--alert-dismiss-rest-alpha",value:"0.7",description:"Dismiss \u2715 \u2014 rest opacity (quiet at rest, full on hover, rule #44) and glyph size. The rest alpha was a hard 0.7 in alert-layout.css whose `:hover` companion lived on the COMPONENT as `hover:opacity-100`, so the two halves of one affordance sat in two files and neither was themeable. Mirrors --sheet-close-rest-alpha. The icon size carries a raw rem, not var(--space-N): it replaces a flat Tailwind `size-4` step and must not start tracking the density axis."},{name:"--alert-dismiss-icon-size",value:"var(--icon-size-md)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--alert-bg-alpha",value:"0.05",description:"Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec (a brand's success-bg/-border are often more present than the faint 5%/30% default)."},{name:"--alert-border-alpha",value:"0.3",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--banner-border-block-end-width",value:"initial",description:"BANNER \u2014 the page-level Alert treatment (gh#255). Every constant a service would want to match to its page grid is a knob (rule #45). --banner-radius and --banner-border-width are NOT declared here (gh#327). They used to be, and both copies were dead: components/banner.css declares the same two names at the same `:root`, base.css imports banner AFTER feedback, so banner won every time. Radius agreed at `0`, but border-width did not \u2014 this file said `0` and banner.css says `1px`, and `1px` is what alert-layout.css actually paints as the strip's block-end hairline. So anyone who read THIS file for the default was told the strip has no rule when it has one, and the MCP token catalog carried both entries with the two conflicting values. banner.css owns the strip geometry; these two live there and only there. The inline inset tracks the live page gutter, so a banner mounted above a PageContainer lines its text up with the page title instead of sitting at a second, unrelated margin. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--banner-space-block",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--banner-space-inline",value:"var(--space-page-active-x)",description:"Inline inset tracks the page gutter so a banner's text lines up with the page title. `--space-page-active-x` steps down to the compact gutter on `.ui-page-container` only, and custom properties inherit \u2014 so a banner rendered INSIDE the container picks the compact value up for free, while the normal case (a banner mounted ABOVE the container, or in AppShell) would keep the desktop gutter and sit 8px out at 390px. The compact step below is what actually keeps the two aligned; retune it rather than hard-coding a mobile inset at the call site."},{name:"--banner-space-inline-compact",value:"var(--space-page-compact-x)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--banner-dismiss-space-offset",value:"var(--space-2)",description:"Dismiss offset is measured from the banner's own (shorter) block inset, so the \u2715 stays optically centred on a one-line strip instead of floating at the inline-alert offset."},{name:"--dialog-content-glow",value:"0 0 0 0 transparent",description:"Brand glow layer for the raised dialog/sheet panel \u2014 invisible no-op at rest (rule #44). Paired AFTER --shadow-lg in the surface box-shadow so a service can wash the overlay with the global glow, e.g. --dialog-content-glow: var(--shadow-glow), with no markup change."},{name:"--empty-state-space-y",value:"var(--space-10)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-space-x",value:"var(--space-6)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-description-max-width",value:"28rem",description:"Measure of the description paragraph (rule #45 \u2014 a service-tunable constant gets a knob). 28rem reads ~65 Latin characters per line; a JA/VI service that needs a shorter or longer measure for its own copy retunes this once instead of forking `.ui-empty-state-description`."},{name:"--empty-state-section-space-y",value:"var(--space-6)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-section-space-x",value:"var(--space-4)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-compact-space-y",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-compact-space-x",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-icon-foreground",value:"initial",description:"EmptyState icon medallion colour \u2014 `initial` so the role defaults re-resolve at the call site under a scoped theme (rule #44). A service recolours the glyph (--empty-state-icon-foreground) or washes the medallion fill (--empty-state-icon-tint) without forking. Defaults = hsl(var(--muted-foreground)) glyph \xB7 hsl(var(--muted)) fill."},{name:"--empty-state-icon-tint",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--empty-state-icon-size",value:"var(--icon-size-4xl)",description:"Medallion box + the glyph inside it. Both were literal (`width: 3rem` in the stylesheet, a `size-6` utility on the icon), so a service could not scale the empty-state mark to its own page rhythm \u2014 and the two must move TOGETHER or the glyph stops sitting centred in its circle, which is exactly the kind of pair rule #45 exists to keep tunable as one."},{name:"--empty-state-icon-glyph-size",value:"var(--icon-size-xl)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-row-gap",value:"var(--space-stack-sm)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-cell-gap",value:"var(--space-inline-lg)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-card-inset",value:"var(--space-section-active)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--skeleton-background",value:"initial",description:"Skeleton placeholder fill \u2014 `initial` so the --muted default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root). A service tints the shimmer to its surface (rule #44) without forking the keyframes. Default = hsl(var(--muted))."},{name:"--skeleton-block-height",value:"1rem",description:"Skeleton bar heights + widths (#319). These carry RAW rem, not var(--space-N): the literals they replace were plain Tailwind steps, which are not multiplied by --scaling. Routing them through the spacing scale would silently make the loading state track the density axis while the loaded content it stands in for does not. Names say what each bar STANDS IN FOR, so a service retuning its type scale knows which one to move."},{name:"--skeleton-caption-height",value:"0.75rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-title-height",value:"1.75rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-label-width",value:"6rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-detail-value-max-width",value:"28rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-stat-value-width",value:"8rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-stat-caption-width",value:"5rem",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-element-radius",value:"initial",description:"SKELETON \xB7 antd 6 parity (ant-design/components/skeleton/style/index.ts). antd derives every element box from `controlHeight` and its \xB1steps; the same boxes here read the `--control-height` tier, so a skeleton button is exactly as tall as the Button it stands in for and follows density with it. The two RATIOS are antd's own multipliers (button = 2\xD7 the box, input = 5\xD7); they are unitless on purpose \u2014 a service widens the stand-in without leaving the height tier. gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--skeleton-button-width-ratio",value:"2",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-input-width-ratio",value:"5",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-node-size",value:"calc(var(--control-height) * 3)",description:"antd's node/image square is `controlHeight * 1.5 * 2`."},{name:"--skeleton-image-glyph-size",value:"var(--icon-size-4xl)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-image-glyph-color",value:"initial",description:"Role-mirror (#44): `initial` so the glyph re-resolves under a scoped theme. Default = hsl(var(--muted-foreground) / 0.4)."},{name:"--skeleton-article-avatar-gap",value:"var(--space-inline-lg)",description:"ARTICLE rhythm. antd: avatar gutter = `padding` (16), title offset beside an avatar = `marginSM` (12), title\u2192paragraph = `controlHeightSM` (24), line\u2192line = `controlHeightXS` (16). antd's fourth value \u2014 28px (`marginLG + marginXXS`) for title\u2192paragraph WITH an avatar \u2014 is not a step of this repo's spacing scale (it goes 24 \u2192 32), and docs/DESIGN-AUTHORITY.md says take a step or leave it rather than invent a number, so both cases take the 24px step."},{name:"--skeleton-article-avatar-title-offset",value:"var(--space-3)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-article-title-gap",value:"var(--space-stack-lg)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-article-line-gap",value:"var(--space-stack-md)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--skeleton-paragraph-last-width",value:"61%",description:"antd's `li:last-child:not(:first-child):not(:nth-child(2))` short last line."},{name:"--skeleton-sweep-gradient",value:"initial",description:"The `active` sheen. One knob, not a from/to pair, so a service retunes the whole sweep once (#45); `initial` keeps the default resolving at the call site under a scoped theme (#44). Default = linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--border)) 37%, hsl(var(--muted)) 63%) \u2014 antd's three stops, on this library's neutral surfaces."},{name:"--query-load-more-space-block-start",value:"var(--space-stack-md)",description:'QUERY LIFECYCLE FOOTERS \u2014 the two rows `<InfiniteQueryState>` appends under a paginated feed: the "load more" button row and the "loading more\u2026" caption. Both gaps were Tailwind literals on the component (`pt-4` / `pt-2`), so a service running a denser (or airier) feed could not align them to its own vertical rhythm without forking the component (rule #45). They live in the feedback tier because these ARE query feedback surfaces and there is no query stylesheet. Defaults = var(--space-stack-md) (16px) and var(--space-stack-sm) (8px) \u2014 the exact values the Tailwind steps resolved to, so adopting this changes nothing until a theme opts in.'},{name:"--query-loading-more-space-block-start",value:"var(--space-stack-sm)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--query-auth-alert-max-inline-size",value:"36rem",description:"The sign-in fallback a query surface paints for an expired session when no AuthExpiryProvider handles it (gh#1022). An expired session is an expected, recoverable condition, so it is capped at a reading measure instead of spanning the page body its DataState wraps. `none` restores the full-width alert."},{name:"--tooltip-max-width",value:"20rem",description:"TOOLTIP \u2014 the transient label surface. Every constant here was a Tailwind literal baked into the component (`max-w-xs px-2 py-1 rounded-md text-xs shadow-md`), so a service could not retune tooltip density or measure without forking the component (rule #45). Defaults reproduce the previous look exactly, so adopting this changes nothing until a theme opts in."},{name:"--tooltip-space-inline",value:"var(--space-2)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-space-block",value:"var(--space-1)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--tooltip-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-shadow",value:"initial",description:"Raised-surface depth \u2014 role-mirror knob, so a flat service theme sets `none` once. `initial` rather than `var(--shadow-md)`: a `:root` binding to the ramp substitutes at `<html>` and a scope that restates the ramp can never reach it (docs/TOKEN-RESOLUTION.md \xA73, gh#880 item 7). The default resolves on `.ui-tooltip-content`. default = var(--shadow-md), resolved at the call site"},{name:"--tooltip-backdrop-blur-size",value:"initial",description:"GLASS (gh#880 item 1) \u2014 `initial`, so unset there is no blur and no backdrop root. A tooltip is the smallest surface in the system and sits over arbitrary content, so it follows \xA74's dropdown rule: if it is made translucent at all, it needs the most opaque fill of the family. Saturate is shared (`--surface-backdrop-saturate`). default = none \u2014 a tooltip blurs nothing"},{name:"--tooltip-background",value:"initial",description:'Surface colours \u2014 `initial` so the popover roles re-resolve at the CALL SITE under a scoped [data-tenant]/.dark theme (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Defaults = hsl(var(--popover)) fill \xB7 hsl(var(--popover-foreground)) text.'},{name:"--tooltip-foreground",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-border-color",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--tooltip-border-color-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--popover-width",value:"18rem",description:"POPOVER \u2014 the interactive overlay panel. Same story as Tooltip: `w-72 rounded-md p-4 shadow-md` were literals, so a service could not align the panel to its own grid or width scale."},{name:"--popover-space-inset",value:"var(--space-4)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--popover-shadow",value:"initial",description:"`initial` + the ramp default at the call site \u2014 same freeze, same reason as --tooltip-shadow. default = var(--shadow-md), resolved at the call site"},{name:"--popover-backdrop-blur-size",value:"initial",description:"GLASS (gh#880 item 1) \u2014 `initial`, no blur and no backdrop root by default. This one carries a second warning: a Popover is a CONTAINER, so turning its blur on makes it the containing block for any `position: fixed` descendant it holds. default = none \u2014 a popover blurs nothing"},{name:"--popover-header-space-gap",value:"var(--space-1)",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-header-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-surface-background",value:"initial",description:"Role-mirror knobs \u2014 `initial`, defaults resolve at the call site (see Tooltip above)."},{name:"--popover-surface-foreground",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-surface-border-color",value:"initial",description:"Feedback primitive tokens: dialog, alert, empty state."},{name:"--popover-surface-border-color-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--popover-surface-inline-size",value:"initial",description:"Width knob, for a panel that owns its own box \u2014 a time column pair, a calendar. The three colour knobs above already existed and padding already read `--popover-space-inset`; width was the one surface property left absolute, so a modifier could only reach it by re-declaring the property \u2014 which loses to import order (styles/__tests__/popover-surface-knob-cascade)."},{name:"--toast-icon-size",value:"var(--icon-size-md)",description:"TOAST (Sonner) \u2014 the status glyph in the toast's leading slot. WHY A KNOB AND NOT A UTILITY: sonner renders the toast body itself and takes the five status glyphs through ONE `icons={{ success, info, warning, error, loading }}` config prop. That prop is all-or-nothing \u2014 a consumer who wants a different glyph size must re-declare all five icons, re-importing lucide and re-deriving the aria wiring. Routing the size through a token makes it a one-line theme override instead (rule #45). Raw rem, not var(--space-N): it replaces a flat Tailwind `size-4` step, and the 16px box sonner gives `[data-icon]` is itself fixed \u2014 scaling the glyph with density alone would overflow it. NAMESPACE NOTE: sonner publishes its own `--toast-*` custom properties (--toast-icon-margin-*, --toast-svg-margin-*, --toast-button-margin-*, --toast-close-button-*). Neither name below collides with those; keep it that way when adding to this group."},{name:"--toast-background",value:"initial",description:"THE TOAST SURFACE (gh#880 item 1). Sonner paints the toast body itself from its own `--normal-bg`, which `sonner.tsx` sets to `hsl(var(--popover))`. That made the fill reachable only by re-declaring sonner's private variable, so this knob is the package's own name for it: the component now passes `var(--toast-background, hsl(var(--popover)))` through, and the default resolves in the browser, on the toaster, under whatever scope it is in. The blur goes on `[data-sonner-toast]` from `alert-layout.css`. `initial` = no blur and no backdrop root; a toast holds an action Button and a close \u2715, neither of which is `fixed`, but the rule is the rule. default = hsl(var(--popover)) at the call site"},{name:"--toast-backdrop-blur-size",value:"initial",description:"default = none \u2014 a toast blurs nothing"},{name:"--toast-mobile-offset",value:"16px",description:"Viewport gutter of the mobile toast stack. Sonner passes `mobileOffset` straight into inline CSS, so a var() string resolves normally. Flat 16px on purpose: this is a fixed inset from the device edge (thumb reach / safe area), not a density-scaled gap inside a surface."},{name:"--dialog-close-size",value:"var(--band-height-xl)",description:"Rule #24 companion for the overlay \u2715 (gh#1138): the 24px floor is the WCAG 2.5.8 AA minimum for a mouse; under a finger the target lifts to the 44px tap floor the control ladder already uses. Only the hit area grows (the `::after` above the glyph) \u2014 the 16px paint stays put."},{name:"--flex-surface-background",value:"initial",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--flex-surface-warning-alpha",value:"0.04",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--flex-surface-radius",value:"initial",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--flex-actions-offset-block",value:"initial",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--flex-actions-offset-inline",value:"initial",description:"Lightweight row surfaces and hover actions; theme overrides remain scoped component knobs."},{name:"--float-button-offset-block-end",value:"var(--space-stack-xl)",description:"THE TWO CORNER INSETS gh#558 ASKED FOR BY NAME. Ant Design's are `marginXXL` (48px) from the bottom and `marginLG` (24px) from the inline end. Spelled here in this library's own stack/inline steps, which land on the same two numbers: --space-stack-xl = --space-10 = 40px, --space-6 = 24px. The block inset is the one a service actually has to move \u2014 a sticky action bar, a cookie strip, a mobile tab bar all live in that corner \u2014 and moving it is now retuning ONE custom property, not writing a media query at the call site (which is `no-arbitrary-spacing` and has no legal spelling)."},{name:"--float-button-offset-inline-end",value:"var(--space-6)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-size",value:"var(--control-height-lg)",description:"The control box. antd's float button is `controlHeightLG` square (40px); this reads the same tier the rest of the library's large controls read, so a density switch moves it with them."},{name:"--float-button-min-block-size",value:"var(--control-height-lg)",description:"A square float button carrying a line of text keeps the WIDTH and grows on the block axis, which is antd's `height: auto`; this is the floor it grows from."},{name:"--float-button-padding-block",value:"var(--space-2)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-padding-inline",value:"var(--space-1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-icon-size",value:"var(--icon-size-md)",description:"The glyph. antd derives it as `fontSizeIcon * 1.5` = 18px; `--icon-size-md` is this library's step at that weight, and it is the step `Button` already gives an icon-only control."},{name:"--float-button-content-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"The line under the glyph, in the square shape. The smallest step, because it is a caption on a control, not body text."},{name:"--float-button-content-line-height",value:"var(--line-height-tight)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-shadow",value:"var(--shadow-lg)",description:"Elevation. The mark sits ABOVE the page, so it needs the shadow that says so; the same step Popover and DropdownMenu sit on."},{name:"--float-button-group-gap",value:"var(--space-stack-md)",description:"Gap between the buttons of an open group, and between the group's list and its trigger. antd uses `padding` (16px) for both, so one token answers both."},{name:"--float-button-group-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--float-button-badge-background",value:"initial",description:"The corner count/dot mark. `--float-button-badge-background` is `initial` so a scoped [data-tenant]/.dark theme that retunes --destructive still reaches the mark; the fallback is resolved at the call site in float-button-layout.css."},{name:"--float-button-badge-foreground",value:"hsl(var(--destructive-foreground))",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-size",value:"var(--space-4)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-padding-inline",value:"var(--space-1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-inset-block-start",value:"calc(var(--space-1) * -1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-inset-inline-end",value:"calc(var(--space-1) * -1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-badge-dot-size",value:"var(--space-2)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-progress-offset",value:"0turn",description:"BackTop's `showProgress` ring. The component writes `--float-button-progress-offset: <n>turn` inline (a custom property, the sanctioned escape from `no-inline-magic-numbers`) and the ring is drawn from it with `conic-gradient` \u2014 no per-frame geometry ever reaches the call site."},{name:"--float-button-progress-width",value:"var(--space-1)",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-progress-color",value:"initial",description:"default = hsl(var(--primary)), resolved at the call site"},{name:"--float-button-progress-track-color",value:"hsl(var(--border))",description:"Float button component tokens \u2014 the corner action and its group (Ant Design FloatButton)."},{name:"--float-button-motion-translate",value:"var(--float-button-size)",description:"How far a group's list travels on the way in. TIMING IS NOT HERE \u2014 `--duration-fast` and `--ease-standard` live in the motion tier (foundation.css) and the stylesheet reads them directly, the rule activity.css states: the component-token name shape has no property word for a duration, and a second copy of the motion scale is how the two drift apart."},{name:"--form-label-width",value:"8rem",description:"Fixed aligned label column by default (gh#284) \u2014 `max-content` sized each field's label column to its own label, so horizontal forms (especially columns={2} grids) had controls starting at ragged x positions. 8rem mirrors --descriptions-label-width so edit forms and show pages share the same optical grid; the Form/FormField `labelWidth` prop overrides."},{name:"--form-label-gap",value:"var(--space-4)",description:"Column gap between the label and its control in horizontal/inline layout. 16px"},{name:"--form-label-font-size",value:"var(--control-label-font-size, var(--text-sm))",description:'Type in the label column. Inherits the body size by default, so nothing moves unless a service opts in. It is a knob because the label column already is one: --form-label-width lets a service align forms to its grid, and a service whose grid was drawn around a smaller label had no way to say so \u2014 leaving it to hand-write font-size per label, which is exactly what the width token exists to prevent. CHAINED to the Label primitive\'s own knob (gh#824), where it used to read var(--text-sm) directly. FormField passes `text-[length:var(--form-label-font-size)]` on its Label, and a utility outranks `.ui-label { font-size: var(--control-label-font-size) }` in `@layer components` \u2014 so this was not an override of the broad knob, it was a SHADOW of it: a service that set --control-label-font-size moved its 4 standalone labels and none of its 21 FormField ones (measured at 1280px, 37px on :root -> 37px vs 14px). Reading the broad knob as the default makes this one an override again, which is what "a per-instance escape" meant. FREE: base.css declares --text-sm AS var(--font-size-sm), the step --control-label-font-size already read, so both sides are 0.875rem and nothing moves. 14px'},{name:"--form-block-gap",value:"var(--space-4)",description:"Row rhythm between a Form's own top-level blocks (gh#295) \u2014 e.g. the field group's CardContent and its CardFooter action row, or two FormFields that happen to be Form's OWN direct children (no Card framing). Unchanged from the historical value. 16px"},{name:"--form-feedback-icon-size",value:"var(--icon-size-sm)",description:"THE VALIDATION FEEDBACK GLYPH. It was `controlIconClass`, which is `size-[length:var(--control-height)]` \u2014 the height of a whole CONTROL, meant for something that fills a control-sized box like the ColorPicker swatch. On a `text-xs` feedback line that rendered a ~32px icon beside ~12px text, which is what a reader actually saw and reported. A glyph that sits inline with text belongs on the ICON scale, one step above the text it accompanies so it reads as a mark rather than a letter. 14px beside 12px text"},{name:"--form-field-row-gap",value:"var(--space-3)",description:"Field-to-field row rhythm (gh#295) \u2014 mirrors --descriptions-row-gap so a read-only value mixed in via `FormField.staticText` (gh#294) and a real Descriptions block share ONE canonical rhythm. Applied via margin-based sibling spacing on FormField itself (not Form's flex `gap`, which only reaches DIRECT children \u2014 dead in the common `Form > CardContent > FormField*` composition every real Save-button form needs), so it holds at any DOM depth relative to Form. 12px"},{name:"--form-grid-row-gap",value:"var(--form-field-row-gap)",description:"Row rhythm between the ROWS of a `<Form columns={n}>` grid (gh#304). The grid path cannot use the margin above \u2014 a per-item margin inside a grid double-counts the track gap AND leaves the first item of row 1 unshifted while its row-mates drop, so row 1's columns end up misaligned. The rhythm therefore rides the grid's own `row-gap`, and it DEFAULTS TO THE SAME --form-field-row-gap the stacked path uses so `columns={1}` \u2014 and every `columns={n}` form once it collapses to one column on a narrow container \u2014 is pixel-identical to a Form with no `columns` at all. Retune this alone only to give multi-column forms a looser row rhythm than stacked ones; retune --form-field-row-gap to move both together. 12px"},{name:"--form-grid-column-gap",value:"var(--space-4)",description:"Gutter between the COLUMNS of a `<Form columns={n}>` grid (gh#304). Was ResponsiveGrid's generic 16px stack gap with no way to say otherwise; it is a form's inter-field gutter and a service aligning forms to its design grid needs it as a knob (rule #45). The default keeps the historical 16px, so nothing moves unless a theme opts in. 16px"},{name:"--image-mask-background",value:"initial",description:"The hover/focus veil over the thumbnail. default = --overlay-background"},{name:"--image-mask-foreground",value:"initial",description:"default = hsl(var(--background))"},{name:"--image-mask-gap",value:"var(--space-1)",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-radius",value:"initial",description:"default = var(--radius)"},{name:"--image-preview-background",value:"initial",description:"The preview stage. default = --overlay-background, as antd's mask"},{name:"--image-preview-foreground",value:"initial",description:"default = hsl(var(--background))"},{name:"--image-preview-inset",value:"var(--space-4)",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-preview-gap",value:"var(--space-2)",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-preview-button-size",value:"2.5rem",description:"Every round control on the stage (close, prev/next, tools). \u2265 the 24px WCAG 2.5.8 floor."},{name:"--image-preview-button-background-alpha",value:"10%",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-preview-button-hover-background-alpha",value:"20%",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--image-preview-icon-size",value:"var(--icon-size-lg)",description:"IMAGE \u2014 a picture that opens large, and its full-viewport preview (`src/components/data-display/image.tsx`, antd `Image` + `Image.PreviewGroup`). The preview's scrim is the shared `--overlay-background` itself \u2014 antd's preview mask is its modal mask \u2014 so a brand that retunes every overlay's scrim retunes this one too. It is used whole, never as a share of a share (gh#886). ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\")."},{name:"--legal-document-measure-max-width",value:"46rem",description:"Readable document measure. Caps the header, the section column and the footer so a 1440px viewport still reads at ~75-90 characters per line."},{name:"--legal-document-column-gap",value:"var(--space-10)",description:"Rail \u2194 document column gutter (two-column mode only)."},{name:"--legal-document-toc-width",value:"15rem",description:"Sticky table-of-contents rail width (two-column mode only)."},{name:"--legal-document-toc-inset-block-start",value:"var(--space-6)",description:"Distance the pinned rail keeps from the top of the scrollport."},{name:"--legal-document-toc-max-height",value:"calc(100dvh - var(--space-12))",description:"Cap for a long contents list so the rail never outgrows the viewport."},{name:"--legal-document-toc-gap",value:"var(--space-1)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-item-padding",value:"var(--space-1) var(--space-2)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--legal-document-toc-title-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-marker-width",value:"initial",description:"Leading marker on the active contents entry \u2014 a non-colour affordance so the active state is never colour-only (WCAG 1.4.1). default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--legal-document-nav-gap",value:"var(--space-4)",description:"Gap between the `documentNavigation` slot and the contents list inside the rail."},{name:"--legal-document-header-gap",value:"var(--space-2)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-meta-gap",value:"var(--space-2)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-meta-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-section-gap",value:"var(--space-10)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-section-title-gap",value:"var(--space-3)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-body-line-height",value:"1.8",description:"Long-form leading \u2014 legal prose reads looser than UI text."},{name:"--legal-document-scroll-offset",value:"var(--space-6)",description:"`scroll-margin-block-start` on every section: the offset a hash jump / anchor activation leaves above the heading so it is not hidden under sticky chrome."},{name:"--legal-document-footer-gap",value:"var(--space-4)",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-toc-border",value:"none",description:"\u2500\u2500 Chrome \u2014 quiet by default (rule #44) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"},{name:"--legal-document-header-border",value:"none",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-footer-border",value:"none",description:'LegalDocumentShell component tokens \u2014 the long-form legal/policy document surface (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky table-of-contents rail. Rule #45 \u2014 every service-tunable constant is a knob: the readable measure, the rail width/offset, the section rhythm and the body leading are exactly the values a service theme wants to re-tune to match its design grid, so NONE of them are hard-coded in `src/styles/layout.css`. Rule #44 \u2014 chrome is a token, default QUIET: every divider (`*-border`) defaults to `none`. A service opts IN via theme, e.g. --legal-document-toc-border: var(--stroke-hairline) solid hsl(var(--border)); Colour knobs whose default is a ROLE token are declared `initial` here with the role default at the CALL SITE (`var(--knob, var(--role))`) \u2014 see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`" \u2014 so a scoped `[data-tenant]` / `.dark` override of the role still reaches them.'},{name:"--legal-document-meta-foreground",value:"initial",description:"\u2500\u2500 Role-mirror knobs \u2014 `initial` here, role default at the call site \u2500\u2500\u2500\u2500\u2500\u2500\u2500 default = hsl(var(--muted-foreground))"},{name:"--legal-document-summary-foreground",value:"initial",description:"default = hsl(var(--muted-foreground))"},{name:"--legal-document-toc-foreground",value:"initial",description:"default = hsl(var(--muted-foreground))"},{name:"--legal-document-toc-active-foreground",value:"initial",description:"default = hsl(var(--foreground))"},{name:"--legal-document-toc-active-background",value:"initial",description:"default = hsl(var(--accent))"},{name:"--legal-document-toc-marker-color",value:"initial",description:"default = hsl(var(--primary))"},{name:"--list-row-padding-y",value:"var(--space-3)",description:"ListRow component tokens \u2014 a single-line entity row for short lists inside a Card (sessions / API tokens / linked accounts / passkeys / notifications \u2026). Sits in a flush CardContent; rows separate with a quiet divider (#44 \u2014 chrome defaults to the calm semantic border)."},{name:"--list-row-padding-x",value:"var(--space-4)",description:"ListRow component tokens \u2014 a single-line entity row for short lists inside a Card (sessions / API tokens / linked accounts / passkeys / notifications \u2026). Sits in a flush CardContent; rows separate with a quiet divider (#44 \u2014 chrome defaults to the calm semantic border)."},{name:"--list-row-gap",value:"var(--space-3)",description:"ListRow component tokens \u2014 a single-line entity row for short lists inside a Card (sessions / API tokens / linked accounts / passkeys / notifications \u2026). Sits in a flush CardContent; rows separate with a quiet divider (#44 \u2014 chrome defaults to the calm semantic border)."},{name:"--list-row-border",value:"initial",description:"Row divider \u2014 `initial` so the --border default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root). Default = 1px solid hsl(var(--border))."},{name:"--list-row-body-min-width",value:"12rem",description:"Inline size the content column keeps before the trailing actions wrap onto their own line (#45 \u2014 a service retunes the stack threshold to its grid). Clamped with min(\u2026, 100%) at the call site, so a container narrower than the knob can never force page-root overflow (#224)."},{name:"--list-row-trailing-gap",value:"var(--space-2)",description:"Gap BETWEEN trailing actions \u2014 they also wrap among themselves at narrow widths (#224)."},{name:"--list-row-compact-padding-y",value:"initial",description:'\u2500\u2500 Compact inline-actions geometry (`density="compact"`, #246) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The canonical invitation / history row: a 36px leading avatar, a shrinkable title + description body and one or two small trailing Buttons, all on ONE line inside the canonical 358px card (326px content after the row\'s own inline inset) at a 390px viewport. These knobs only LOWER the geometry \u2014 the #224 wrap contract (row + trailing cluster wrap, body clamped with min(\u2026, 100%)) is untouched, so a cluster that genuinely cannot fit still wraps instead of widening the page root. Declared `initial` so the spacing defaults re-resolve at the CALL SITE \u2014 --space-2 is density-scaled and re-declared inside a `.ui-density-*` subtree, so a :root binding would freeze compact rows at the :root density (docs/TOKENS.md \u2014 the :root freeze rule). Defaults = var(--space-2) block padding \xB7 var(--list-row-padding-x) inline padding \xB7 var(--space-2) gap.'},{name:"--list-row-compact-padding-x",value:"initial",description:"Inline inset defaults to the default row axis so compact and default rows in the same Card keep one optical axis; a service retunes it to its own grid (#45)."},{name:"--list-row-compact-gap",value:"initial",description:"ListRow component tokens \u2014 a single-line entity row for short lists inside a Card (sessions / API tokens / linked accounts / passkeys / notifications \u2026). Sits in a flush CardContent; rows separate with a quiet divider (#44 \u2014 chrome defaults to the calm semantic border)."},{name:"--list-row-compact-body-min-width",value:"6rem",description:"Compact body threshold \u2014 small enough that avatar + body + two compact Buttons fit the canonical column (36 + 8 + 96 + 8 + 146 = 294 \u2264 326), and still a readable measure."},{name:"--list-row-read-background",value:"initial",description:"Read (default) row surface \u2014 `initial`, documented default = transparent, i.e. the Card surface shows through untouched (#44 \u2014 chrome defaults to the quietest state)."},{name:"--list-row-unread-background",value:"initial",description:"Unread emphasis surface (`unread` rows) \u2014 `initial` so the --muted default re-resolves at the call site under a scoped theme. Documented default = hsl(var(--muted)), the same quiet emphasis role the table header uses; it keeps the xs muted description line at WCAG AA (4.63:1 light / 5.47:1 dark), which hsl(var(--accent)) would not (4.23:1 light)."},{name:"--list-row-indicator-color",value:"initial",description:"Unread indicator dot fill \u2014 `initial` so the --primary default re-resolves at the call site under a scoped theme. Documented default = hsl(var(--primary))."},{name:"--list-row-indicator-size",value:"var(--space-2)",description:"Diameter of the read/unread indicator dot; the gutter is reserved on read rows too so the titles of a mixed list stay on one optical axis."},{name:"--logo-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--logo-size-xs",value:"1.25rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-size-sm",value:"1.5rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-size-md",value:"1.75rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-size-lg",value:"2.25rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-font-size-xs",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-font-size-sm",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-font-size-md",value:"var(--font-size-sm, var(--font-size-base))",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-font-size-lg",value:"var(--font-size-base)",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-success-background",value:"initial",description:'Semantic identity fill reads the --brand IDENTITY role: independent of --primary (a re-themed action colour never recolours the mark) AND of --success (the \u82E5\u7AF9 STATUS green stays on badges/progress/"saved" text \u2014 the mark used to borrow it and rendered \u0394E76 \u2248 17.5 off the canonical emerald, gh#250). Services retune the role once for every Logo. ROLE-MIRROR KNOBS \u2014 declared `initial` here with the role default at the CALL SITE (logo-layout.css), so a scoped `.dark` / `[data-tenant]` override of --brand actually reaches the mark instead of freezing at the :root value (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Documented defaults: --logo-success-background = hsl(var(--brand)) --logo-success-foreground = hsl(var(--logo-identity-foreground)) --logo-godx-color = hsl(var(--brand))'},{name:"--logo-success-foreground",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-color",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-identity-foreground",value:"60 33% 99%",description:'Identity-fill INK \u2014 the ink `mark="glyph"` sets its (caller-supplied) TEXT in when it sits on the --brand identity fill. This is deliberately NOT --brand-foreground. --brand-foreground is the identity artwork\'s KNOCKOUT colour, not an ink: it tracks --background in both themes (light 60 33% 99% = --background; dark 48 9% 9% = --background) because `<Logo mark="godx">` punches its inner bar as an evenodd HOLE and the email mark has to paint that hole as a solid fill to match. Negative space only has to clear WCAG 2.2 SC 1.4.11 (3:1, non-text) \u2014 and at 3.67:1 on the emerald it does. The boxed glyph is a different thing: it renders real TEXT, so SC 1.4.3 applies at 4.5:1 (14px bold is NOT "large text" \u2014 that needs 18.66px bold / 24px). THIS INK USED TO BE THEME-INVARIANT, AND THE VIOLET IDENTITY ENDED THAT. While --brand was \u7FE0 emerald the fill was light in BOTH themes, so one near-black ink cleared AA on both. Brand identity v2.3 makes the fill #7A00FF in light and #DCBCFF in dark \u2014 dark and light respectively \u2014 so a single ink cannot serve both: measured, near-black on the light-theme violet is 2.77:1, a real AA failure, while the same ink on the dark-theme violet is 10.72:1. So the ink now FLIPS with the theme, and each side is measured: light ink 60 33% 99% (#fdfdfb) on #7A00FF = 6.30:1 dark ink 48 9% 9% (#191815) on #DCBCFF = 10.72:1 The dark override lives HERE and not in foundation.css on purpose: `:root` and `.dark` have equal specificity, and tokens/base.css imports this file AFTER foundation.css \u2014 so a `.dark` rule there would lose to the `:root` rule here. Same file, later block, no ambiguity. A service that re-themes --brand to a fill of the opposite lightness overrides --logo-success-foreground (the public knob) to re-invert the ink. NOT a role-mirror knob: its default is a real value, not a role token, so there is no role to freeze at :root and the `initial` + call-site rule (docs/TOKENS.md) does not apply to it.'},{name:"--logo-godx-ink-color",value:"235 68.6% 13.7%",description:"\u2500\u2500 The LOGOTYPE ink (`<Logo mark=\"godx-lockup\" />`, identity v2.3) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The lockup's letters G, o and D are the kit's indigo #0B0F3B; the mark and the X are the brand identity colour and read --logo-godx-color instead. They are two ROLES, not a decorative split, so they get two knobs. A TOKEN AND NOT THE LITERAL, because the literal only works in one theme: #0B0F3B is 18.00:1 on the light canvas and 1.03:1 on the dark one \u2014 invisible. Dark takes the kit's own dark text colour instead (#F7FAF8, 16.87:1), flipped in the block at the end of this file the same way the boxed glyph's ink is."},{name:"--logo-glyph-cap-baseline-optical-offset",value:"-0.01em",description:'\u2500\u2500 Optical centring of the boxed GLYPH (`<Logo glyph="\u2026" />`, gh#370) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 A vertical nudge of the glyph\'s INK inside the mark box, in `em` so one value holds at every tier. Applied with `translate` (styles/logo-layout.css): the box, the fill and the layout are untouched, only the letterform moves. WHY THERE ARE FOUR. `place-items: center` centres a LINE BOX, and a line box is not a letterform. Every CSS rule available is ONE constant shift that cannot see which character it is moving, and the glyph classes do not share an optical centre: measured over Noto Sans JP, M PLUS 2, Hiragino Sans and the system stack \xD7 xs/sm/md/lg, their ink centres lie 0.21em apart. So the COMPONENT classifies the glyph string it was handed \u2014 the only layer that can \u2014 and emits `data-ink`; these are the per-band constants it selects between. The band is the (top edge, bottom edge) of the UNION of the string\'s ink, so `"gX"` is cap\u2192descender, not `"g"`\'s x-height\u2192descender. Every CJK and kana form counts as a cap-height top: the em box overshoots the cap band above the baseline and below it by about the same amount, so it centres where a capital does (measured -0.001em against -0.008em). MEASURED \u2014 worst |ink offset| from the box centre over 4 faces \xD7 4 tiers \xD7 the sample listed: cap-baseline -0.01em 1.38px G GX TH A 8 b kt J \u795E \u3042 \u30F3 \u30B4 \u795EA A\u3042 cap-descender -0.09em 1.25px gX Gy Bp hy \u795Eg g\u3042 \u6771y x-baseline -0.11em 0.88px x o xo ae s x-descender -0.21em 0.94px g y p q go Worst case 1.38px, against 2.25px for the best glyph-blind rule (`text-box: trim-both ex alphabetic`) and 3.94px untreated, on that same sample. The residual is within-band variation \u2014 kana do not all fill the em box (\u30B4 sits 0.04em above \u795E) \u2014 plus the half-pixel the browser snaps a line box by; no classifier can remove either.'},{name:"--logo-glyph-cap-descender-optical-offset",value:"-0.09em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-x-baseline-optical-offset",value:"-0.11em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-x-descender-optical-offset",value:"-0.21em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-optical-offset",value:"initial",description:"The escape hatch, for a mark none of the four bands fits \u2014 a face with unusual metrics, or a glyph the classifier cannot see (an inline `<svg>`, which is left unclassified on purpose). Set once and it PINS every band to that value. Declared `initial` (guaranteed-invalid) so it is inert by default and the per-band default at the CALL SITE wins \u2014 the same pattern as --logo-godx-size (docs/TOKENS.md). Documented default: --logo-glyph-optical-offset = the --logo-glyph-*-optical-offset for the band the glyph was classified into, or 0 when it was not classified."},{name:"--logo-glyph-fullwidth-width",value:"1",description:"\u2500\u2500 Fitting the glyph to the mark box (`<Logo glyph=\"\u6771\u4EAC\" size=\"xs\" />`, gh#377) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 `.ui-logo` is a fixed square and the glyph was set at a fixed per-tier font-size, so nothing related the string's INLINE ADVANCE to the box it had to fit in. A full-width form occupies a whole em, and CJK offers a line-break opportunity between EVERY pair of ideographs \u2014 so two kanji in the 20px `xs` box did not overflow, they WRAPPED into a two-line mark. Latin never showed this because a Latin word has no interior break opportunity: it silently spilled instead. Measured across Noto Sans JP / M PLUS 2 / Hiragino Sans / the system stack \xD7 the four tiers, the wrap hit \u6771\u4EAC \u795E\u6238 \u30B4\u30B8 \u682A\u5F0F at xs and sm, \u6771\u4EAC\u90FD at every tier, and \u2014 already inside the gh#370 sample \u2014 \u795EA and A\u3042 on Hiragino at xs. THE FIX IS THE SAME SHAPE AS gh#370. CSS cannot see the string, so it cannot know what advance to make room for; the COMPONENT can. It counts the string's characters in four classes and emits them as --logo-glyph-fullwidth-count / --logo-glyph-wide-count / --logo-glyph-narrow-count / --logo-glyph-space-count (pure, no measurement, no layout read, SSR-safe). styles/logo-layout.css turns those counts into a modelled advance and caps the glyph's font-size at the size that advance fits in \u2014 `min()`, so a mark whose advance already fits keeps its tier font-size EXACTLY and nothing that renders correctly today moves. `white-space: nowrap` sits under it as the invariant: a brand mark is one line. EACH CONSTANT IS AN UPPER BOUND OF ITS CLASS \u2014 that is the entire contract. Over-stating an advance sets the mark a little smaller than it had to be; under-stating it puts the mark OUTSIDE the box, which is the defect this whole mechanism exists to remove. The first cut carried one constant for every proportional form and dropped white space from the count, and both under-states shipped as spill (`WW` 3.50px, `\u6771 \u4EAC` 2.63px \u2014 see below). THE INVARIANT, stated as the gate asserts it: for every mark, at every tier, on every bundled face, the FITTED font-size times the PAINTED advance stays inside the box. Not \"each constant bounds its class in isolation\" \u2014 see the recorded slack below. MEASURED advance in em, per character, max over the four faces (a DOM advance read at 200px, never a canvas `fillText`: that substitutes a fallback face for a webfont): full-width form 1 \u2190 1.000 \u795E \xB7 \u6771 \xB7 \u3042 \xB7 \u30B4 \xB7 \u682A \xB7 \u300C \xB7 \u3001 \xB7 \uFF27, every one 1.0000 em-wide Latin 1.06 \u2190 1.058 W 1.0580 \xB7 m 1.0100 \xB7 M 0.9870 \u2014 all Hiragino Sans other Latin/digit 0.81 \u2190 0.863 w 0.8630 \xB7 O/Q 0.8380 \xB7 U 0.8291 \xB7 H 0.8260 \xB7 N 0.8210 \xB7 X 0.8110 \xB7 8 0.7120 \xB7 k/t 0.5435 \xB7 l 0.3150 collapsible space 0.34 \u2190 0.333 Hiragino 0.3330 \xB7 M PLUS 2 0.2730 \xB7 Noto 0.2270 \xB7 system 0.1978 `M W m` get a class of their own because they REACH the full-width em \u2014 `W` passes it, at 1.058em WIDER than a kanji \u2014 so no proportional constant holds them without shrinking every other Latin mark to fit. With them out of the way the narrow class stays at 0.81. RECORDED SLACK, not an oversight: six forms (w \xB7 O \xB7 Q \xB7 U \xB7 H \xB7 N \xB7 X) measure 0.811\u20130.863em, above the 0.81 constant, by at most 0.053em. Measured, none of them reaches the box edge at its tier's font-size \u2014 `ww` at xs paints 19.2px of a 20px box \u2014 so raising the constant to 0.87 would shrink 120 of 480 measured cells to buy nothing, against this file's own rule that a mark which already fits keeps its tier font-size to the byte. The gate re-derives the margin from the shipped tokens, so a change to the type scale or the box ramp re-tests it rather than inheriting this conclusion. --logo-glyph-fit-max-width is the share of the box a FITTED glyph's modelled advance may take. 0.95 leaves 0.50px (xs) / 0.60px (sm) / 0.70px (md) of fill clear of the modelled ink on each side of a two-kanji mark \u2014 measured on the paint, 0.50\u20131.50px at xs across the four faces, against the 0.5px minimum the library already ships (\u795EA on M PLUS 2 at xs). It is a CAP, not a target: it only binds on the marks that do not fit."},{name:"--logo-glyph-wide-width",value:"1.06",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-narrow-width",value:"0.81",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-space-width",value:"0.34",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-glyph-fit-max-width",value:"0.95",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-size-xs",value:"1.5rem",description:'\u2500\u2500 Identity-mark box (`<Logo mark="godx" />`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The `size` prop drives the identity mark exactly like it drives the boxed glyph \u2014 a public prop that renders identically at every tier is a silent no-op, and the godx LOCKUP already scaled its wordmark per tier, so a fixed mark broke the mark\u2194wordmark proportion at `size="lg"` (gh#163 follow-up). The godx artwork is a horizontal capsule inside a square viewBox, so it carries less optical weight than the fully-filled glyph box: each tier sits +0.25rem above its --logo-size-* sibling. `md` is 2rem \u2014 the historical fixed value \u2014 so every existing default-size identity surface renders byte-identically. --logo-godx-size is the PIN: declared `initial` (guaranteed-invalid) here with the per-tier default at the CALL SITE (logo-layout.css), so it is inert by default and a service that sets it once freezes the mark at that box on EVERY tier \u2014 the same call-site pattern the role-mirror colour knobs use (docs/TOKENS.md). Retune a single tier via --logo-godx-size-*. Documented default: --logo-godx-size = unset (tiers apply).'},{name:"--logo-godx-size-sm",value:"1.75rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-size-md",value:"2rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-size-lg",value:"2.5rem",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-godx-size",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-gap",value:"var(--space-2)",description:'\u2500\u2500 Wordmark / lockup (`<Logo wordmark="GoDX" />`) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 The readable product name set beside the mark. The package ships NO wordmark artwork: the wordmark is typeset in the design-system display face, so a service retunes face, weight, tracking, size and the mark\u2194wordmark gap here instead of writing page CSS. The colour is a role-mirror knob whose default is the IDENTITY role --brand (never --primary, never the --success status green): the GoDX/`success` lockup is canonical emerald out of the box, and every other lockup reads --foreground. Documented defaults: --logo-wordmark-font-family = var(--font-family-display); --logo-wordmark-color = hsl(var(--foreground)), or hsl(var(--brand)) on the godx / tone="success" lockup.'},{name:"--logo-wordmark-font-size-xs",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-size-sm",value:"var(--font-size-sm, var(--font-size-base))",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-size-md",value:"var(--font-size-base)",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-size-lg",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-weight",value:"700",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-letter-spacing",value:"-0.01em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-font-family",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-wordmark-color",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-divider-width",value:"initial",description:'\u2500\u2500 The PRODUCT SUFFIX (`<Logo mark="godx-lockup" productSuffix="ID" />`, gh#649) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 "GoDX | ID" \u2014 the brand lockup followed by a rule and the name of ONE product. Later also "GoDX | Console", "GoDX | Admin", and each of those localized. WHY THE SUFFIX IS TYPESET AND NOT DRAWN. The kit hands over "GoDX | ID" as a single flattened lockup in its own coordinate space (`0 0 1234 242`, against this package\'s `30 30 871.29 182`), so shipping it would put a SECOND master next to the one above \u2014 different box, different gradients, its own `id="title"`/`id="desc"`, its own hardcoded `#0B0F3B` ink and `#C5C8D6` rule. That is four of the defects gh#649 was opened about, and it buys nothing that survives the next product: a drawn suffix means one more master, one more release and one more dark variant for every name that is ever added, and it cannot be localized at all. So the suffix is TEXT \u2014 the same decision, and the same tokens, the readable `wordmark` already uses. The brand\'s own construction (the G, the arrow, the "GoDX" logotype, the golden ratio between them) stays untouched inside the master; a PRODUCT NAME is not part of that construction. SIZE / FACE / TRACKING ARE THE WORDMARK\'S, ON PURPOSE. The suffix sits on the same baseline, in the same lockup, at the same optical level as the wordmark, so it reads --logo-wordmark-font-size-* / --logo-wordmark-font-family / --logo-wordmark-letter-spacing rather than growing a parallel ramp a service would then have to keep in step. Only the two knobs whose ROLE differs get their own token: the suffix is not the brand logotype, so it is set in UI ink (--foreground) at a lighter weight, and "GoDX" stays the dominant word. THE RULE. --logo-divider-height is `1em` of the suffix\'s own type, so the tick is exactly as tall as the word it separates at every tier with no per-tier token: 12.5 / 14 / 14 / 17.6px against a 24 / 28 / 32 / 40px lockup box. ITS COLOUR IS THE LOGOTYPE\'S INK AT 0.25 ALPHA, NOT A GREY AND NOT --border. Measured on the shipped tokens: light #0B0F3B at 0.25 over --background #fdfdfb \u2192 #c1c2cb, 1.74:1 the kit\'s hardcoded rule #c5c8d6 \u2192 1.64:1 (\u0394RGB \u2264 11, no dark counterpart) --border (the table-grid hairline) \u2192 1.15:1 (its own note above records this) dark #F7FAF8 at 0.25 over --background #191815 \u2192 #515150, 2.30:1 So the rule lands on the kit\'s grey in the theme the kit drew it for, and \u2014 unlike the literal \u2014 it has a dark theme at all, because it is derived from --logo-godx-ink-color, which already flips. ALPHA rather than a mix with --background, so the rule is still correct on a coloured topbar. Nothing here is WCAG-load-bearing: SC 1.4.11 exempts a part of a logo or brand name. ROLE-MIRROR KNOBS \u2014 `initial` here, role default at the CALL SITE (docs/TOKENS.md). Documented defaults: --logo-divider-color = var(--logo-godx-ink-color) --logo-product-suffix-color = hsl(var(--foreground)) default = var(--stroke-hairline), resolved at the call site (gh#906)'},{name:"--logo-divider-height",value:"1em",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-divider-alpha",value:"0.25",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-divider-color",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-product-suffix-gap",value:"var(--space-2)",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-product-suffix-font-weight",value:"500",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-product-suffix-color",value:"initial",description:"Logo component tokens \u2014 the product brand-mark box (a glyph on the primary fill), used in the app shell header, auth screens, and topbars. Size + radius + per-tier font-size are knobs so a service theme retunes the mark without forking CSS (rules #44/#45). Colours read the primary role tokens directly, so a re-themed --primary re-tints the mark automatically."},{name:"--logo-identity-foreground",value:"48 9% 9%",description:"The other half of the ink flip above \u2014 see --logo-identity-foreground. The dark fill is the LIGHT violet, so the glyph goes back to the near-black spine (10.72:1)."},{name:"--logo-godx-ink-color",value:"140 23.1% 97.5%",description:"The kit's dark text colour \u2014 #F7FAF8, 16.87:1 on the dark canvas."},{name:"--marquee-gap-inline",value:"var(--space-inline-lg)",description:"Space between items inside one copy AND between copies \u2014 they are the same rhythm, so they are one knob. The trailing gap is painted as the copy's own `padding-inline-end`, which is what makes the seam between two copies indistinguishable from the seam between two items. The `gap` prop overrides it per instance; this is the resting value a service sets once."},{name:"--marquee-mask-width",value:"var(--space-10)",description:'Width of the fade at each edge under `fade`. A MASK, so it reveals whatever the surface behind it is \u2014 the prior art paints an opaque `gradientColor` (default "white"), which is a white smear on a dark theme.'},{name:"--masonry-gap-inline",value:"0px",description:"Resting spacing between tiles, per axis, when the `gap` prop is omitted. Ant Design's `gutter` defaults to `0` and this ports that default exactly \u2014 a service that wants every masonry in the product to breathe sets these two once in its theme.css, and a per-instance `gap` still wins. The packer READS the resolved `row-gap` back off the container, so this token (or the `gap` prop that overrides it) is the single source for both the painted spacing and the arithmetic. There is no second number in the TypeScript."},{name:"--masonry-gap-block",value:"0px",description:"Masonry component tokens \u2014 Ant Design `Masonry` (6.0.0): tiles of unequal height packed into columns. antd retunes this surface through `classNames` / `styles` semantic maps. Those are deliberately not ported (cardinal rules #44/#45, docs/DESIGN-AUTHORITY.md \u2014 \"a knob that only a fork could reach is not parity either\"); this file is the answer instead. TIMING IS NOT HERE. The re-flow and the appear fade read `--duration-base` / `--ease-standard` from the motion tier (src/tokens/foundation.css), because the component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration and a second copy of the motion scale is how the two drift apart \u2014 the same note `float-button.css` and `activity.css` carry. The COLUMN COUNT is not a token. It is `columns`, a prop, because a masonry's column count is the call site's decision about that collection and not a global design knob."},{name:"--mega-menu-bar-gap",value:"var(--space-inline-xs)",description:"Bar"},{name:"--mega-menu-trigger-height",value:"var(--control-height)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-padding-x",value:"var(--space-3)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-gap",value:"var(--space-inline-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--mega-menu-trigger-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-foreground",value:"hsl(var(--foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-background",value:"transparent",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-hover-background",value:"initial",description:"ROLE-MIRROR KNOBS \u2014 `initial`, NOT `hsl(var(--accent))` (gh#687, docs/TOKENS.md). A tier that binds to a tenant-scoped role computes ONCE at `:root` and every descendant inherits that computed colour, so a `[data-tenant]` block redefining `--accent` would leave this bar on the root brand while its neighbours followed. The knob stays empty here and the role is the FALLBACK at the call site in styles/navigation-layout.css, which re-resolves per scope. Documented defaults: hover/open = accent on accent-foreground, current = primary."},{name:"--mega-menu-trigger-hover-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--mega-menu-trigger-hover-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-open-background",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-open-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-current-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-trigger-disabled-alpha",value:"0.5",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-expand-icon-size",value:"var(--control-icon-size-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-background",value:"hsl(var(--popover))",description:"Panel surface"},{name:"--mega-menu-panel-foreground",value:"hsl(var(--popover-foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-border-color",value:"hsl(var(--border))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--mega-menu-panel-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--mega-menu-panel-padding",value:"var(--space-6)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-shadow",value:"var(--shadow-md)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-offset",value:"0px",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-max-height",value:"70vh",description:"A forty-link panel must not run off the bottom of a laptop; past this it scrolls in the block axis and nothing is unreachable."},{name:"--mega-menu-panel-translate",value:"var(--space-1)",description:"Travel of the open animation. Zeroed under prefers-reduced-motion, where the panel SNAPS into place \u2014 it is never removed, only un-animated."},{name:"--mega-menu-groups-gap",value:"var(--space-6)",description:"Panel columns"},{name:"--mega-menu-group-gap",value:"var(--space-inline-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-min-width",value:"12rem",description:"A column may not get narrower than this before the grid drops to fewer columns; this is what keeps a 40-link panel readable instead of pouring it into one ribbon."},{name:"--mega-menu-group-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-label-foreground",value:"hsl(var(--muted-foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-description-foreground",value:"hsl(var(--muted-foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-group-icon-size",value:"var(--control-icon-size-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-gap",value:"var(--space-inline-sm)",description:"Panel rows"},{name:"--mega-menu-link-padding-x",value:"var(--space-2)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-padding-y",value:"var(--space-2)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--mega-menu-link-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-foreground",value:"hsl(var(--foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-hover-background",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-hover-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--mega-menu-link-hover-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-current-foreground",value:"initial",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-description-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-description-foreground",value:"hsl(var(--muted-foreground))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-icon-size",value:"var(--control-icon-size-sm)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-link-min-height",value:"var(--touch-target-min)",description:"A nav row is a WCAG 2.2 SC 2.5.8 target: the AA floor, scale-exempt like the token itself."},{name:"--mega-menu-panel-footer-gap",value:"var(--space-4)",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--mega-menu-panel-footer-border-color",value:"hsl(var(--border))",description:"MegaMenu \u2014 the disclosure navigation bar and its full-width panel. Every knob a theme would want to move lives here: nothing in navigation-layout.css writes a literal length for this component. The trigger's BOX HEIGHT is deliberately a pointer at the `--control-height` tier and never an offset of it (cardinal rule #45 / check:control-sizing) \u2014 a bar cell must sit on the same step as the Buttons beside it in a real top bar, and that step is density-aware."},{name:"--pagination-gap",value:"var(--space-inline-sm)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--pagination-item-gap",value:"var(--space-inline-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--pagination-size-width",value:"5.5rem",description:"Size-changer trigger MIN width (gh#286) - the trigger sizes to its content (w-max) so localized labels (ja 100/\u30DA\u30FC\u30B8) never clip; this token only keeps short labels from collapsing below the control rhythm."},{name:"--pagination-page-padding-x",value:"var(--space-1)",description:"Inline padding on a page button. The button keeps min-width: var(--control-height), so this only takes effect once a number outgrows that box. Deliberately --space-1 rather than --space-2: at the wider value a two-digit label (14.8px of text + 2 * 8px + 2px border) came to 32.8px and pushed the common 1\u20132 digit buttons off square by 0.8px."},{name:"--pagination-total-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--pagination-icon-size",value:"var(--control-icon-size)",description:'Chevron glyph inside the `simple` form\'s Prev/Next Buttons (#319). Those are size="sm" Buttons, so `.ui-button--sm svg` would draw them at --control-icon-size-sm; the component pinned them larger with a literal `size-4` class instead, because in simple mode the chevron IS the control \u2014 there is no label beside it to carry the affordance. The knob keeps that deliberate override themeable (rule #45) and tracks the default control-icon tier, so it now follows density like every other control glyph instead of staying a flat 1rem.'},{name:"--pagination-control-height-sm",value:"initial",description:'Ant Design `size="small"`. Retuned as ONE local --control-height on the bar, so the page buttons, the size-changer trigger and the quick-jumper field shrink together instead of each carrying its own tier \u2014 exactly how a service would retune the whole footer. Declared `initial` (gh#705): the documented default is `var(--control-height-sm)`, resolved at the bar, so a small pager inside a density scope (a compact DataTable, whose toolbar Buttons are 25.76px) sits on the same step as its neighbours instead of a frozen 28px band.'},{name:"--pagination-jumper-gap",value:"var(--space-inline-xs)",description:"Ant Design `showQuickJumper`. The field is sized to a page NUMBER, not to a sentence, so it gets its own width rather than the shared control measure."},{name:"--pagination-jumper-width",value:"4rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--pagination-jumper-font-size",value:"var(--pagination-total-font-size)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-gap",value:"var(--space-3)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-padding-y",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-picker-width-sm",value:"11rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-picker-width-md",value:"14rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-item-gap",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-separator-size",value:"var(--control-icon-size-sm)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-inline-index-font-weight",value:"var(--font-weight-bold)",description:"Inline-step emphasis (gh#12). The step number's weight and tint are separate knobs so a service can express progression the canonical way \u2014 an accent TINT at normal weight \u2014 instead of the original bold. --steps-inline-index-color / --steps-inline-separator-color are role-mirror knobs (docs/TOKENS.md): `initial` so their defaults (the inherited step colour and the --muted-foreground role) resolve at the CALL SITE and a scoped [data-tenant]/.dark override still reaches them. Defaults reproduce today's row byte for byte."},{name:"--steps-inline-index-color",value:"initial",description:"default = currentColor at the call site"},{name:"--steps-inline-separator-color",value:"initial",description:"default = hsl(var(--muted-foreground))"},{name:"--app-setting-picker-compact-control-height",value:"var(--control-height-sm)",description:"AppSettingPicker `compact` (gh#217) \u2014 the small, content-hugging labelled trigger used in an auth/legal footer, where the square icon-only default reads as a stray button and the full labelled trigger is too tall. Box height comes from the official --control-height-sm tier (never a literal / ad-hoc calc), and every other knob is themeable (rule #45)."},{name:"--app-setting-picker-compact-padding-x",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-compact-gap",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-compact-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--breadcrumb-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--breadcrumb-menu-trigger-gap",value:"var(--space-inline-xs)",description:"Ant Design `BreadcrumbItemType.menu` \u2014 the sibling picker hung off a segment. The trigger is the segment's own text plus a disclosure chevron, so it only needs the gap between them."},{name:"--breadcrumb-item-max-inline-size",value:"none",description:"`BreadcrumbItemProp.ellipsis` (gh#1046) \u2014 the widest a truncating crumb may grow. `none` = it only cuts when the one-line trail runs out of room; a theme may cap it (e.g. `16em`)."},{name:"--menu-shortcut-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-list-max-inline-size",value:"100%",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-list-overflow",value:"auto",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-list-background",value:"initial",description:'THE DEFAULT STRIP\'S TRACK AND ITS SELECTED SLAB (gh#880 item 3) \u2014 the pair whose absence was the defect the owner spotted by eye: a translucent Card whose Tabs strip stayed opaque `--muted`, so "c\xE1c card n\xE0y c\xF3 \u0111\u1ED3ng b\u1ED9 \u0111\xE9o \u0111\xE2u". Both used to be Tailwind utilities on the component (`data-[variant=default]:bg-muted` on the list, `data-[state=active]:bg-background` on the trigger), i.e. `@layer utilities`, which outranks every rule this package can write \u2014 the strip was not merely un-knobbed, it was unreachable. `--segmented-track-background` / `--segmented-item-selected-background` are the SAME track-and-slab pair and have been knobs since gh#848; `segmented.css` says in so many words that its role ports "are the ones `Tabs` ALREADY MADE". So these two are named after that pair and default to exactly the roles the utilities painted. `initial` with the default at the call site, for the reason that file measured: written `var(--muted)` here the binding substitutes on `<html>` and a scope below root inherits the root\'s answer, which reads as correct only because `.dark` also lands on `<html>`. default = hsl(var(--muted)) at the call site'},{name:"--tabs-list-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tabs-trigger-active-background",value:"initial",description:"default = hsl(var(--background)) at the call site"},{name:"--tabs-trigger-active-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tabs-placement-responsive-breakpoint-width",value:"48rem",description:'Width at or below which `tabPlacement="start"`/`"end"` folds to `top`/`bottom` (gh#502) \u2014 a vertical strip and its panel share one inline axis and a phone has room for one of them. Same line `--sheet-responsive-breakpoint-width` draws; `0px` (which no viewport matches) turns the fold off. Read in JS (src/lib/breakpoint-token.ts) because the fold also swaps which arrow keys move the roving focus \u2014 see the note on `foldVerticalPlacement` in navigation/tabs.tsx.'},{name:"--tabs-indicator-background",value:"initial",description:"Tabs `line` active indicator (gh#248) \u2014 the ONLY selected-state decoration the line variant paints. The surrounding active ring belongs to the default/card lists, so `:focus-visible` keeps its own distinct keyboard ring here (WCAG 2.4.7). `--tabs-indicator-background` is a role-mirror knob: `initial` so hsl(var(--primary)) re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding to a role var would freeze at :root). Default = hsl(var(--primary)) \xB7 2px thick \xB7 flush with the trigger edge (offset 0 = quietest, rule #44); a service raises the offset to park the bar on a thicker strip hairline."},{name:"--tabs-indicator-size",value:"2px",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-indicator-offset",value:"0px",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-indicator-inset",value:"0px",description:"Ant Design `indicator.size` \u2014 the bar's LENGTH along the strip, as the inset it leaves at EACH end of the trigger. `0px` = antd's own default (`getLength` returns `origin`, the tab's whole offset width), so the default paint does not move. `indicator={{ size: \"label\" }}` on the component repoints this at the trigger's own inline/block padding, which is what `size: (origin) => origin - 2 * padding` is written to produce upstream (@rc-component/tabs src/hooks/useIndicator.ts)."},{name:"--tabs-root-gap",value:"0.5rem",description:"Gap between the tab strip and the panel below it."},{name:"--tabs-list-line-space-inset",value:"0px",description:"Inset of the `line` strip. The default/pill strip keeps its own padding box; the line strip is a flat underlined rail, so its default is the quietest value \u2014 none (rule #44). Raise it to give the rail breathing room above its hairline."},{name:"--tabs-list-line-space-gap",value:"0.25rem",description:"GUTTER BETWEEN TRIGGERS on the `line` strip \u2014 Ant Design's `tabBarGutter`, which is declined as a PROP and lives here instead (cardinal rules #44/#45): a number of pixels handed straight to the caller is not a semantic axis, it is a constant, and a constant belongs to the theme. A RAW rem, not `var(--space-1)` \u2014 the same rule the block above states and for the same reason: `gap-1` reads Tailwind's own --spacing grid, which this repo does NOT density-scale, so a --space-* default would silently widen the gutter under a comfortable density. 0.25rem is byte for byte what `gap-1` resolved to, so no strip moves. A service that wants the gutter to follow density points this at var(--space-1) itself. The other two strips already had their knob: the card strip reads `--tabs-card-list-space-gap`, and the pill strip has no gutter at all by design (its triggers are `flex-1` inside one padded box). This was the one strip a service could only retune by forking the class list. scale-exempt: it must equal what the `gap-1` it replaces painted. --space-1 is 0.25rem at the default density but calc(0.25rem * var(--scaling)) under any other, and Tailwind's own --spacing grid \u2014 which this repo does not density-scale \u2014 is what the strip was drawn against. Binding it to the step would move a gutter this commit exists not to move."},{name:"--tabs-list-focus-ring-space-inset",value:"initial",description:"BLOCK HEADROOM FOR THE FOCUS RING (gh#376). The horizontal strip is a scroll container (`overflow-x: auto` + `overflow-y: hidden`), and a block-axis clip shaves whatever a trigger paints outside its own box \u2014 measured in Chromium, the `line` strip gives its triggers 0px of block headroom, so the entire focus ring was cut off top and bottom. The headroom has to come from LAYOUT, not from relaxing the clip: `overflow-y: visible` beside `overflow-x: auto` computes back to `auto` per spec (a second scroll container, not a ring), and Chromium honours `overflow-clip-margin` only when BOTH axes are `clip`, so a single-axis clip silently drops it. The strip therefore pads its block axis by the ring's outer reach and pulls the same amount back with a negative block margin, so the ring paints INSIDE the scrollport while the strip occupies exactly the space it did before. `initial` (the role-mirror rule in docs/TOKENS.md, not a :root binding) because the default is derived from `--focus-ring-*`, which components and tenants DO re-scope; binding it at :root would freeze the headroom while the ring it is sized from moved. Documented default = `calc(var(--focus-ring-width) + var(--focus-ring-glow-width))` \u2014 the ring's outer reach, read at the call site so the two can never disagree."},{name:"--tabs-trigger-line-radius",value:"0px",description:"`line` trigger box. Square corners because the selected state is the token-owned ::after bar, never a pill; the hit box is wider/taller than the pill trigger so the underline spans a real column of the rail."},{name:"--tabs-trigger-line-padding-x",value:"1rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-line-padding-y",value:"0.5rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-height-sm",value:"var(--band-height-sm)",description:"TABS SIZE TIERS \u2014 Ant Design's `size` (`small`/`middle`/`large`) expressed as this library's own control bands, so a tab strip and the Buttons beside it land on the same rhythm instead of on antd's 24/32/40 ladder. `md` reproduces today's trigger exactly: `--band-height-md` is the default control band and `--font-size-base` is what the `text-sm` step already resolved to."},{name:"--tabs-trigger-height-md",value:"var(--band-height-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-height-lg",value:"var(--band-height-lg)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-font-size-sm",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-font-size-md",value:"var(--font-size-base)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-font-size-lg",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-padding-x-sm",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-padding-x-md",value:"var(--space-3)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-padding-x-lg",value:"var(--space-4)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-card-list-radius",value:"0px",description:'TABS CARD FACE (`variant="card"` / `"editable-card"`). The strip loses the pill container \u2014 transparent, no inset, no radius \u2014 and gains a rail its tabs sit on; each tab becomes a boxed face rounded on the leading block edge only, and the ACTIVE one drops its block-end edge so it reads as joined to the panel. `--tabs-card-background` is a role-mirror knob (docs/TOKENS.md): `initial` so the --muted default re-resolves at the CALL SITE under a scoped [data-tenant] or .dark theme instead of freezing at :root.'},{name:"--tabs-card-list-space-inset",value:"0px",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-card-list-space-gap",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-card-radius",value:"var(--radius-md, calc(var(--radius) / var(--radius-ratio)))",description:"Read via `rounded-s-[var(--tabs-card-radius)]` / `rounded-e-[var(--tabs-card-radius)]` in tabs.tsx \u2014 a Tailwind utility (`@layer utilities`) this package cannot hand a fallback to from CSS, so (same reasoning as `--button-radius` in control.css) this stays a plain :root binding rather than `initial`. The `var(--radius-md, \u2026)` fallback is gh#888: without it, the tier's global unfreeze leaves `--radius-md` unset and this \u2014 and every card-variant Tab corner \u2014 would go to 0. The formula keeps the declaration byte-identical to before gh#888."},{name:"--tabs-card-rail-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--tabs-card-background",value:"initial",description:"default = var(--muted) at the call site"},{name:"--tabs-card-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--tabs-panel-background",value:"initial",description:"TABS JOINED BODY (`bodied`, gh#762). The card strip alone is half an object: antd's active face repaints the edge FACING the panel in the surface colour, which only reads as \"opened into\" when there IS a surface under it \u2014 and the package shipped no such body, so every consumer picked a box and every box was wrong (measured on 28.0.0: `<Card>` 8px gap + a second 1px border at a 9.7px radius, `<Card variant=\"borderless\">` 8px gap, no box 8px gap). `--tabs-panel-background` is a role-mirror knob (docs/TOKENS.md): `initial` so the --background default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme. It is read BOTH by the body and by the active card face's merged edge, so the two can never disagree \u2014 a theme that retints the body retints the tab that opens into it. The radius mirrors the tab's own (`--tabs-card-radius`), because the body and the faces are two halves of one outline; the border width mirrors the rail's, for the same reason. default = var(--background) at the call site"},{name:"--tabs-panel-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--tabs-panel-border-width",value:"var(--tabs-card-rail-border-width, var(--stroke-hairline))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-panel-radius",value:"initial",description:"`initial`, not `var(--tabs-card-radius)` \u2014 a :root binding freezes (gh#888); default resolves at the call site. Default = var(--tabs-card-radius)."},{name:"--tabs-panel-space-inset",value:"var(--space-4)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-min-width",value:"var(--space-4)",description:"TAB COUNTER PILL (`TabItemProp.count`, gh#762) \u2014 the SAME counter Button and Toggle already draw, so \u300C\u672A\u5BFE\u5FDC 12\u300D on a tab and on a filter chip are one thing at one size. Values mirror `--toggle-count-*` verbatim; the two tints are role-mirror knobs (`initial` + a call-site fallback) so a scoped theme re-resolves them."},{name:"--tabs-count-space-inline",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-gap",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-radius",value:"var(--radius-pill)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-count-background",value:"initial",description:"default = hsl(var(--muted)) at the call site"},{name:"--tabs-count-card-background",value:"initial",description:"\u2026and on a CARD tab, whose own resting fill is already `--muted`, the pill would land on its own colour (measured 1.00:1 \u2014 invisible; the gh#602 failure on a third control). It takes the page surface there, exactly as `.ui-toggle-soft .ui-toggle-count` does. default = hsl(var(--background)) at the call site"},{name:"--tabs-count-color",value:"initial",description:"default = hsl(var(--muted-foreground)) at the call site"},{name:"--tabs-count-active-background",value:"initial",description:"default = hsl(var(--primary)) at the call site"},{name:"--tabs-count-active-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tabs-count-active-color",value:"initial",description:"default = hsl(var(--primary-foreground)) at the call site"},{name:"--tabs-count-forced-outline-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--tabs-bar-gap",value:"var(--space-2)",description:"TABS BAR ROW \u2014 the one inline run that holds the strip, the `editable-card` add button and the `extra` (antd `tabBarExtraContent`) slots."},{name:"--tabs-extra-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-overflow-size",value:"var(--band-height-md)",description:'OVERFLOW MENU TRIGGER (`overflow="menu"`, antd `more`). Sized off the same control band as the add button so the two affordances that flank the strip land on one rhythm; unlike the add button it draws no card face, because it is bar chrome rather than a tab.'},{name:"--tabs-overflow-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--tabs-overflow-icon-size",value:"var(--control-icon-size)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-add-size",value:"var(--band-height-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-add-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--tabs-add-icon-size",value:"var(--control-icon-size)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-icon-size",value:"var(--control-icon-size)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-tab-remove-size",value:"var(--band-height-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-tab-remove-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--tabs-tab-remove-icon-size",value:"var(--icon-size-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-tab-remove-space-inline-end",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-hover-background",value:"initial",description:"Menu item hover/highlight tint \u2014 `initial` so the --accent default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root). Defaults = hsl(var(--accent)) fill \xB7 hsl(var(--accent-foreground)) text."},{name:"--menu-item-hover-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--menu-item-hover-foreground",value:"initial",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-sticky-offset",value:"0px",description:"Sticky offset for the pinned filter strip (Toolbar `sticky`, #197). Default 0 (chrome, rule #44); raise it so the strip parks below a fixed topbar."},{name:"--filter-bar-sticky-background",value:"initial",description:"Fill painted only when the filter strip is pinned. Role-mirror knob (rule #45): `initial` so --background re-resolves at the call site under a scoped [data-tenant]/.dark theme."},{name:"--filter-bar-scroll-padding-y",value:"var(--space-1)",description:'Scrollbar gutter reserved under a `overflow="scroll"` filter strip (#216) so the inline scrollbar never overlaps the controls. Rule #45 \u2014 a service theme retunes it to its grid (0 on an overlay-scrollbar platform).'},{name:"--filter-bar-search-width",value:"20rem",description:"FilterBar typed model (gh#258) \u2014 token-owned geometry so every list page gets the SAME search width, filter width, chip rhythm and section stacking without page-local CSS. All are rule-#45 knobs: a service theme retunes them once, props/className override per instance. Below 640px the strip stacks (search/filters full-width); the widths apply from the 640px breakpoint up, always clamped by min(100%, \u2026) so a narrow container never overflows at 390px with long JA/EN/VI labels."},{name:"--filter-bar-filter-width",value:"var(--filter-picker-width-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-chip-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--filter-bar-section-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-height",value:"var(--band-height-md)",description:"MENU SURFACES \u2014 one row rhythm shared by DropdownMenu and Select's listbox. The row height was a literal `2rem` in the CSS and DropdownMenu had not been converted at all, so it carried the whole box as Tailwind literals on the component (#319). A service tunes the menu rhythm once here instead of once per surface."},{name:"--menu-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--menu-item-space-inline",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-space-gap",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-font-size",value:"var(--font-size-base)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-inset-space-inline-start",value:"var(--space-8)",description:"Inset rows (a checkbox/radio row without its own indicator) reserve the indicator column so labels stay aligned with their checked siblings."},{name:"--menu-indicator-size",value:"0.875rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-indicator-inset-inline-start",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-icon-size",value:"var(--icon-size-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-content-space-inset",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-content-min-width",value:"10rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--dropdown-content-min-width",value:"8rem",description:"DropdownMenu is anchored to a small trigger, so it opens narrower than a context menu."},{name:"--dropdown-content-max-width",value:"calc(100vw - 1.5rem)",description:"Ceiling of the menu surface's intrinsic width (gh#1103). The surface is `width: max-content` so its width never depends on the provisional `left` it is first laid out at; this keeps a long label inside the viewport, less React Aria's default 12px container padding each side."},{name:"--dropdown-content-background",value:"initial",description:"THE MENU SURFACE (gh#880). `.ui-dropdown-menu-content` painted `hsl(var(--popover))` with no knob, while `.ui-popover-content` \u2014 the same kind of floating panel, in the same portal \u2014 had `--popover-surface-background`. That asymmetry is the shape of defect this repo keeps paying for: the theme reaches two of the three menu surfaces and the third silently stays opaque. A DROPDOWN IS THE MOST OPAQUE MEMBER OF THE FAMILY, by the standard's own rule (docs/GLASSMORPHISM-STANDARD.md \xA74): it is small, it sits over arbitrary content, and a 7-line menu over a photograph is unreadable at a card's alpha. It therefore gets its OWN fill knob rather than sharing the popover's \u2014 the two are meant to be able to differ. default = hsl(var(--popover)) at the call site"},{name:"--dropdown-content-backdrop-blur-size",value:"initial",description:"default = none \u2014 a menu blurs nothing"},{name:"--menu-content-width-sm",value:"12rem",description:'MENU WIDTH LADDER (gh#396) \u2014 the measures `<DropdownMenuContent width="sm|md|lg">` selects. Read ONLY when the prop is set, so an untouched menu keeps --dropdown-content-min-width above and moves by nothing. They exist because a menu wider than its trigger \u2014 a user menu, a project switcher, a notification panel \u2014 had exactly one mechanism left at the call site (`className="min-w-56"`), which put the width of every menu in the app beyond a theme\'s reach. A regular ladder, not the three literals one app happened to write: a service that wants 22.5rem notification panels retunes --menu-content-width-lg once.'},{name:"--menu-content-width-md",value:"16rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-content-width-lg",value:"20rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--dropdown-arrow-width",value:"var(--space-3)",description:"Ant Design `arrow` \u2014 the pointer at the anchored edge. Radix stamps a 10\xD75 svg; these two knobs override it so the pointer scales with a service theme's menu chrome. `--dropdown-arrow- background` is a role-mirror knob: `initial`, so --popover re-resolves at the CALL SITE."},{name:"--dropdown-arrow-height",value:"var(--space-inline-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--dropdown-arrow-background",value:"initial",description:"default = var(--popover) at the call site"},{name:"--menu-separator-space-block",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-separator-space-inline",value:"calc(var(--space-1) * -1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-dot-size",value:"0.625rem",description:"STEPS \u2014 the full (non-inline) variant. `--steps-inline-*` already covers the compact inline form; the marker, connector and text rhythm of the main variant were still literal on the component (#319), so a service could not resize the dot, retighten the vertical run, or move the horizontal connector to match its own grid."},{name:"--steps-dot-process-ring-width",value:"initial",description:"default = var(--stroke-xl), resolved at the call site (gh#906)"},{name:"--steps-marker-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--steps-marker-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-marker-icon-size",value:"var(--icon-size-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-wait-icon-size",value:"var(--icon-size-xs)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-title-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-title-font-size-compact",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-subtitle-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-vertical-space-gap",value:"var(--space-3)",description:"Vertical run: gap between marker and text, and the drop to the next step."},{name:"--steps-vertical-space-block-end",value:"var(--space-8)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-vertical-text-space-block-start",value:"var(--space-1)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-horizontal-text-space-block-start",value:"var(--space-2)",description:"Horizontal run: the text sits under the marker, and the connector spans the gap between two markers \u2014 inset by the marker radius on each side so it never runs under a marker."},{name:"--steps-horizontal-text-space-inline",value:"var(--space-2)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-connector-inset",value:"1.25rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-connector-space-block-start",value:"var(--space-4)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-nav-space-gap",value:"var(--space-2)",description:'STEPS `navigation` (Ant Design `type="navigation"`) \u2014 each step becomes a slab that points at the next one. The rail\'s hairline connector is switched OFF for this type, so the join is the chevron plus this gap; the slab tint is the same `--muted` / `--accent` pair every other quiet surface in the library uses, so a service retunes it once at the role.'},{name:"--steps-nav-space-inline",value:"var(--space-4)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-nav-space-block",value:"var(--space-3)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-nav-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--steps-nav-separator-size",value:"var(--control-icon-size-sm)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--steps-progress-ring-width",value:"initial",description:"STEPS `percent` (Ant Design) \u2014 the determinate arc around the CURRENT marker. It is a ring drawn in a padding box AROUND the existing marker, so no status face changes geometry. `--steps-progress-track-color` is a role-mirror knob (docs/TOKENS.md): `initial`, so the --muted default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme. default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--steps-progress-track-color",value:"initial",description:"default = var(--muted) at the call site"},{name:"--app-setting-picker-locale-width",value:"10rem",description:"APP SETTING PICKER \u2014 per-kind trigger widths (#319). Each picker is sized to the longest value it can show: a timezone name is far wider than a theme name. These were literal `sm:w-*` steps in a lookup table, so a service whose locale renders longer labels (a German timezone list, a Japanese density label) could not widen just the one that overflows."},{name:"--app-setting-picker-timezone-width",value:"14rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-date-format-width",value:"11rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-time-format-width",value:"11rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-theme-width",value:"9rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-brand-width",value:"11rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-density-width",value:"10rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-font-size-width",value:"9rem",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-trigger-width",value:"auto",description:"The width the labelled trigger actually RENDERS at \u2014 the one above that `data-kind` selected, or `auto` when no per-kind width applies (below the breakpoint, or `compact`). The trigger consumes this through a single `w-*` utility, because a width declared in @layer components loses to the utilities the Select trigger emits and the eight tokens above were therefore inert (gh#819). Set a per-kind token to retune one picker; set this one to override the axis at a call site."},{name:"--app-setting-picker-width-breakpoint",value:"40rem",description:"Below this the trigger hugs its content instead of taking the per-kind width, so a picker dropped into a narrow topbar never stretches the bar (gh#165)."},{name:"--app-setting-picker-bar-border-width",value:"0",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-bar-shadow",value:"none",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-icon-size",value:"var(--icon-size-md)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--app-setting-picker-icon-rest-alpha",value:"0.7",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--menu-item-height",value:"var(--band-height-xl)",description:"Rule #24 for the two row-shaped surfaces in this file (gh#1146). Measured at 390px with `(pointer: coarse)`: a DropdownMenu / Select row 32px, a tab trigger 34px. Rows sit flush against each other and a horizontal tab list clips its block overflow, so neither can borrow a larger target from a pseudo-element the way an isolated control does \u2014 the ROW itself reaches the 44px tap floor, as every touch platform's menus and tab bars do. Tab sizes collapse onto the floor under a finger, exactly as the control ladder's compact/default steps already do."},{name:"--tabs-trigger-height-sm",value:"var(--band-height-xl)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-height-md",value:"var(--band-height-xl)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--tabs-trigger-height-lg",value:"var(--band-height-xl)",description:"Navigation primitive tokens: pagination, filters, compact pickers."},{name:"--org-chart-node-inline-size",value:"13rem",description:"The box. A fixed inline size, so siblings line up in even columns and the connector bus has a predictable pitch; long names wrap inside it instead of widening one box."},{name:"--org-chart-node-padding-block",value:"var(--space-3)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-node-padding-inline",value:"var(--space-3)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-node-gap",value:"var(--space-3)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-node-text-gap",value:"var(--space-1)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-node-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--org-chart-node-border-width",value:"initial",description:"default = var(--stroke-hairline)"},{name:"--org-chart-node-border-color",value:"initial",description:"default = hsl(var(--border))"},{name:"--org-chart-node-background",value:"initial",description:"default = hsl(var(--card))"},{name:"--org-chart-node-foreground",value:"initial",description:"default = hsl(var(--card-foreground))"},{name:"--org-chart-node-title-color",value:"initial",description:"default = hsl(var(--muted-foreground))"},{name:"--org-chart-node-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-agent-border-style",value:"dashed",description:'The `agent` variant\'s stroke style. A dashed edge, not a second colour \u2014 the difference must survive greyscale, and the sr-only "AI agent" carries it for a screen reader.'},{name:"--org-chart-level-gap",value:"var(--space-8)",description:"Spacing of the tree itself: the vertical run between a parent and its children's row, and the gutter between two siblings. The connector is drawn inside these gaps, half above the bus and half below it."},{name:"--org-chart-sibling-gap",value:"var(--space-4)",description:'ORG CHART \u2014 boxes joined by lines, top-down (`src/components/data-display/org-chart.tsx`). Every length the chart paints is a knob (cardinal rule #45) and the defaults are the quiet reading (#44): a hairline connector in the border hue, a card-coloured box with the hairline edge every other surface here has. An `agent` box differs by its STROKE STYLE only (dashed), so a theme that retunes the edge colour retunes both kinds at once. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"), so a scoped `[data-tenant]` / `.dark` override reaches them instead of freezing at `:root`.'},{name:"--org-chart-line-width",value:"initial",description:"The connector. default = var(--stroke-hairline)"},{name:"--org-chart-line-color",value:"initial",description:"default = hsl(var(--border))"},{name:"--org-chart-padding",value:"var(--space-2)",description:"Room around the chart inside its scroll region, so an edge box's focus ring is not clipped."},{name:"--scroll-area-scrollbar-width",value:"thin",description:"`thin` reproduces the old 10px rail closely on the platforms that draw a classic scrollbar; `auto` gives the full-width platform bar, which is what a touch/coarse-pointer console wants. Only `auto | thin | none` are valid \u2014 a length is not (that is the standard property's whole bargain, and the reason `--scroll-area-bar-size` could not survive as a rem)."},{name:"--scroll-area-thumb-color",value:"initial",description:"Role-mirror knobs: `initial` so the defaults re-resolve at the CALL SITE under a scoped [data-tenant] / .dark theme. Defaults = hsl(var(--border)) thumb on a transparent track."},{name:"--scroll-area-track-color",value:"initial",description:"SCROLL AREA \u2014 the scrollbar, and the bottom-anchoring contract (gh#311). The hand-drawn rail knobs (--scroll-area-bar-size / -bar-padding / --scroll-area-thumb-radius) are GONE with the Radix rail they sized (v23): the browser draws the scrollbar now, and what a service can retune about it is the three standard scrollbar properties below. They live here, beside the anchoring constant, so every ScrollArea knob is in one file."},{name:"--scroll-area-scrollbar-space",value:"auto",description:"`scrollbar-gutter`: `auto` (reflow when a bar appears) | `stable` | `stable both-edges`. Reach for `stable` where content starting to overflow must not shift the layout under the reader."},{name:"--scroll-area-always-bar-size",value:"0.625rem",description:'`scrollbar="always"` geometry (gh#798). Only these two, and only for that value: the always-on bar is DRAWN by this package via `::-webkit-scrollbar`, so unlike the platform bar it has a size this package must name. The colours are NOT duplicated \u2014 the always-on rules read the same `--scroll-area-thumb-color` / `-track-color` role-mirrors as the standard ones.'},{name:"--scroll-area-always-thumb-radius",value:"var(--radius-pill)",description:"SCROLL AREA \u2014 the scrollbar, and the bottom-anchoring contract (gh#311). The hand-drawn rail knobs (--scroll-area-bar-size / -bar-padding / --scroll-area-thumb-radius) are GONE with the Radix rail they sized (v23): the browser draws the scrollbar now, and what a service can retune about it is the three standard scrollbar properties below. They live here, beside the anchoring constant, so every ScrollArea knob is in one file."},{name:"--scroll-area-anchor-offset",value:"3rem",description:"SCROLL AREA \u2014 the scrollbar, and the bottom-anchoring contract (gh#311). The hand-drawn rail knobs (--scroll-area-bar-size / -bar-padding / --scroll-area-thumb-radius) are GONE with the Radix rail they sized (v23): the browser draws the scrollbar now, and what a service can retune about it is the three standard scrollbar properties below. They live here, beside the anchoring constant, so every ScrollArea knob is in one file."},{name:"--segmented-track-padding",value:"calc(var(--space-1) / 2)",description:"track padding = the bold line width = 2px. Half the base spacing step rather than a raw length, so it rides `--scaling` with everything else."},{name:"--segmented-track-background",value:"initial",description:"track background \u2014 the recessed ground a control group sits in. default = var(--muted), resolved at the call site"},{name:"--segmented-track-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--segmented-track-radius",value:"initial",description:"track radius = the base radius; item radius = one step DOWN the radius scale, not `radius \u2212 trackPadding` (the two coincide only because the source scale happens to step by 2). This scale is \u03C6-spaced, so \"one step down\" from --radius is --radius-md (6px \u2192 3.71px, against the source's 6 \u2192 4); --radius-sm is two steps and reads visibly squarer. The same pair is already what TabsList (`rounded-lg`) and TabsTrigger (`rounded-md`) use \u2014 this library's other track-and-slab control. gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--segmented-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--segmented-item-padding-inline",value:"calc(var(--control-padding-x) - 1px)",description:"item padding-inline = control padding-x \u2212 one border width."},{name:"--segmented-xs-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"xs type step = the step Button xs already reads, so an xs bar and an xs Button on one row carry the same label size. One step of the existing scale, not a new constant."},{name:"--segmented-xs-item-padding-inline",value:"calc(var(--control-padding-x-compact) - 1px)",description:"xs item padding-inline = the SAME derivation as the md step (control padding-x \u2212 one border width), taken one rung down the control padding scale: 8 \u2212 1 = 7 against 12 \u2212 1 = 11. At 11px around a 12.47px label a three-option bar no longer reads as dense."},{name:"--segmented-item-gap",value:"calc(var(--space-3) / 2)",description:"icon gap = the small margin step / 2."},{name:"--segmented-item-color",value:"initial",description:"item ink = the label ink \xB7 hover / selected ink = the body ink. default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--segmented-item-hover-color",value:"initial",description:"default = var(--foreground), resolved at the call site (gh#906)"},{name:"--segmented-item-selected-color",value:"initial",description:"default = var(--foreground), resolved at the call site (gh#906)"},{name:"--segmented-item-hover-background",value:"initial",description:"item hover fill = the lighter neutral \xB7 active fill = the heavier of the pair. default = var(--accent), resolved at the call site (the freeze rule)"},{name:"--segmented-item-hover-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--segmented-item-active-background",value:"var(--secondary)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-item-active-background-alpha",value:"100%",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-item-selected-background",value:"initial",description:"selected fill = the elevated surface + a soft shadow \u2014 the selected slab reads as lifted off the recessed track, which is the whole affordance. default = var(--background), resolved at the call site"},{name:"--segmented-item-selected-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--segmented-item-selected-shadow",value:"initial",description:"`initial` + the ramp default at the CALL SITE (gh#880 item 7). Bound to `var(--shadow-md)` here it substituted on `<html>`, so a scope that restated the elevation ramp could not move the selected slab \u2014 the same freeze the two knobs above this one were converted for in gh#848, left on the one property that carries the lift. docs/TOKEN-RESOLUTION.md \xA73. default = var(--shadow-md), resolved at the call site"},{name:"--segmented-item-selected-font-weight",value:"var(--font-weight-medium)",description:"A SECOND SIGNAL, because the first one is nearly invisible on a light canvas (gh#843). The lifted-slab idea is right and the tokens express it, but measured on /showcase/theme-customization the slab is `rgb(253,253,252)` on a `rgb(244,243,240)` track \u2014 **1.09:1**, against the 3:1 floor WCAG 2.2 SC 1.4.11 sets for a non-text indicator. The reporter's words were \"ch\u1ECDn th\xEC \u0111\xE9o th\u1EA5y c\xF3 thay \u0111\u1ED5i g\xEC\", and the ratio says why: selection was carried by fill and shadow alone, and both are near-zero here. Weight does not depend on the canvas at all, which is the point \u2014 a 500 label reads as chosen on white, on near-white and in dark. antd's Segmented does the same; this is not a new idea, it is the one signal this port left out. The shadow steps `sm` \u2192 `md` alongside it so the elevation is doing visible work rather than nominal work."},{name:"--segmented-item-selected-border-color",value:"initial",description:"THE SIGNAL THAT ACTUALLY CLEARS THE FLOOR (gh#843, second pass). Weight above is a second signal; it is not a fix for the first one, because SC 1.4.11 is about the NON-TEXT indicator and a font weight is text. Measured from foundation.css: light slab rgb(253,253,252) on track rgb(244,243,240) \u2192 1.09:1 dark slab rgb(25,24,21) on track rgb(49,47,43) \u2192 1.33:1 Neither is fixable by moving the FILL. The slab is `--background` and the track is `--muted`; for the pair to reach 3:1 on a near-white canvas one of them has to become a mid grey (relative luminance \u2248 0.26, about #8a8a88), which either inverts the lifted-white-slab idea this control shares with TabsList/TabsTrigger, or re-seeds `--muted` for the whole system \u2014 a repaint of every recessed surface in the library to fix one control. Both are far larger than the defect. So the indicator moves to a BOUNDARY, which is what SC 1.4.11 asks for and what costs one hairline: `--input` is this palette's documented control-boundary role, already held at \u22653:1 in both themes for exactly this purpose. Measured against both of its neighbours: light vs track 3.18:1 \xB7 vs slab 3.47:1 dark vs track 3.17:1 \xB7 vs slab 4.22:1 It is painted as an INSET shadow next to the elevation shadow, so the selected item gains a ring without gaining a border box \u2014 no reflow, and `--segmented-item-padding-inline` (which already subtracts one border width) stays honest. `initial` + a call-site fallback, per docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\": a `:root` binding to `var(--input)` would freeze at the root's light value and a scoped dark region would keep the light ring. default = var(--input), resolved at the call site"},{name:"--segmented-count-min-width",value:"var(--button-count-min-width)",description:"Counter pill beside the label (gh#602). Geometry matches Button/Toggle count pills; COLOUR follows `Tabs` (gh#1019): resting = `--background` / `--muted-foreground`, byte-identical to a resting `.ui-tabs-count` on a CARD tab \u2014 the Tabs rule for a pill whose host surface is `--muted`, which the Segmented track is (a `--muted` pill there is 1.00:1, shape gone). The selected segment's pill = `--primary` / `--primary-foreground`, identical to the active tab's. gh#602 had painted EVERY pill primary \u2014 four identical blobs that dropped the one thing a count pill in a one-of-N control can say, \"this is the chosen one\". The resting number is held to SC 1.4.3 (\u2265 4.5:1 in both themes, measured in segmented-count-tabs-convention-1019.test.ts); it is not the selection indicator, so its fill only has to stand off the track, not reach 3:1. antd has no `count` on SegmentedItemType; this knob exists because every faceted filter in the wild needs one and nesting Badge in `label` was the only API until now."},{name:"--segmented-count-space-inline",value:"var(--button-count-space-inline)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-count-font-size",value:"var(--button-count-font-size)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-count-radius",value:"var(--radius-pill)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-count-gap",value:"var(--space-1)",description:"Segmented (one-of-N control) component tokens. EVERY VALUE BELOW IS A PORT OF AN ESTABLISHED SEGMENTED SPEC, NOT A CHOICE. The geometry and the role assignments come from the widely-implemented enterprise Segmented control, transcribed as ratios rather than as pixels: track padding: the bold line width \u2192 2px track background: the page's recessed neutral item colour: the label ink \xB7 hover / selected colour: the body ink item hover fill: the lighter neutral \xB7 item active fill: the heavier neutral item selected fill: the elevated surface label height = control height \u2212 track padding \xD7 2 \u2192 32 \u2212 4 = 28 label padding-inline = control padding-x \u2212 border width \u2192 12 \u2212 1 = 11 icon gap = the small margin step / 2 \u2192 6 THE ROLE PORTS ARE THE ONES `Tabs` ALREADY MADE. TabsList is `bg-muted` and an active TabsTrigger is `bg-background` + `shadow-sm` \u2014 the same track-and-slab pair, so a Segmented and a default Tabs strip read as one control family in both themes rather than two near-misses. That matters more than reproducing the source dark ramp literally: that ramp's dark track is BLACK with a lighter slab on it, while this palette's dark `--muted` sits above `--background`, so a literal port would invert the pairing relative to every Tabs strip on the same page. NOT ONE OF THEM READS THE BRAND SEED. The spec's own derivation produces identical Segmented values for its default seed and for this system's `#0071bd` \u2014 the control is neutral by construction, and the only brand ink it can carry is the focus mark, which styles/focus-ring.css owns. So the ports below are ROLE references (the same neutrals this system already names), never copied hex. The disabled state is the ONE place this departs. The source recolours to a disabled ink and changes nothing else; this system disables every control with the one `--disabled-opacity` knob, and a single library-wide answer outranks a per-component one. The other thing NOT ported is the sliding thumb: it exists to animate between items, and the implementations that have one remove the `-item-selected` class while it runs, which means the selected state lives in two places at once. A static selected slab reads identically at rest and cannot desynchronise."},{name:"--segmented-count-background",value:"initial",description:"default = hsl(var(--background)) at the call site"},{name:"--segmented-count-color",value:"initial",description:"default = hsl(var(--muted-foreground)) at the call site"},{name:"--segmented-count-selected-background",value:"initial",description:"default = hsl(var(--primary)) at the call site"},{name:"--segmented-count-selected-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--segmented-count-selected-color",value:"initial",description:"default = hsl(var(--primary-foreground)) at the call site"},{name:"--segmented-count-forced-outline-width",value:"initial",description:"default = var(--stroke-hairline) at the call site"},{name:"--separator-rule-size",value:"initial",description:"Rule weight, both orientations and both halves of a labelled rule. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--separator-rule-color",value:"initial",description:"Rule colour. Role-mirror knob \u2192 declared `initial` so the --border default re-resolves at the CALL SITE under a scoped [data-tenant] / .dark theme (docs/TOKENS.md \u2014 the :root freeze rule). Documented default = hsl(var(--border))."},{name:"--separator-label-gap",value:"initial",description:"Gap between the label and each rule half. `initial` so the default re-resolves at the call site: --space-* is density-scaled and re-declared inside a `.ui-density-*` subtree, so a :root binding would freeze the gap at the :root density. Documented default = var(--space-3)."},{name:"--separator-label-inset",value:"initial",description:'Length of the SHORT rule half when labelAlign is `start` / `end` \u2014 the label\'s inset from the inline edge (the Slack/Mattermost stream convention). It is a grid track on the INLINE axis, so it flips with the writing direction under dir="rtl" with no extra rule. `initial` for the same density reason as the gap. Documented default = var(--space-6).'},{name:"--separator-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Label type ramp (#46) \u2014 steps of the modular scale, never a literal. `xs` is the quiet stream/divider voice; --separator-label-line-height keeps ja/vi descenders and tone marks intact (cf. #254); --separator-label-font-weight lets a service raise an unread watermark without touching the day divider."},{name:"--separator-label-line-height",value:"var(--line-height-normal)",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-label-font-weight",value:"var(--font-weight-medium)",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-label-color",value:"initial",description:"Label colour. Role-mirror \u2192 `initial`; documented default = hsl(var(--muted-foreground))."},{name:"--separator-tone-muted-rule-color",value:"initial",description:"Per-tone rule + label colours. `tone` re-points BOTH the rule and the label \u2014 never the rule alone \u2014 so an attention rule such as an unread watermark is not colour-only (WCAG 1.4.1) and survives forced-colors. All role-mirror \u2192 `initial`; documented defaults are the matching semantic role. `muted` deliberately mirrors the quiet default so a service can still split the two voices later without a breaking change."},{name:"--separator-tone-muted-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-primary-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-primary-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-success-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-success-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-warning-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-warning-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-destructive-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-destructive-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-info-rule-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--separator-tone-info-label-color",value:"initial",description:'Separator component tokens (gh#308) \u2014 the tokenized rule AND the LABELLED rule that a `label` interrupts: a message stream\'s day divider, an unread "new messages" watermark, an auth conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider, whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the `--auth-shell-divider-*` layer \u2014 so a service that retuned its login divider silently retuned every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them. Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding padding. A service opts IN to a louder watermark from its theme, never by forking CSS.'},{name:"--sheet-responsive-breakpoint-width",value:"48rem",description:'Viewport width at and below which `SheetContent responsive="auto"` renders the mobile bottom sheet instead of the desktop side panel. Read at runtime by useSheetResponsiveMode() (a CSS @media cannot resolve a custom property), so a service moves the drawer breakpoint from ONE knob for every overlay that opts into the responsive contract \u2014 Sheet and OrgSwitcher alike. 48rem = 768px mirrors the library\'s canonical mobile line (useIsMobile). Accepts px/rem/em.'},{name:"--sheet-bottom-max-height",value:"85dvh",description:'Block size cap for the responsive BOTTOM presentation only (never for a plain `side="bottom"` sheet, which stays content-sized). Keeps the sheet below the viewport so the SheetBody scrolls and the page behind it stays visible/dismissable.'},{name:"--responsive-grid-column-width",value:"20rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-section-label-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-product-tenant-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-badge-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-badge-background",value:"initial",description:'Sidebar nav count pill colours \u2014 the pill had a font-size knob and NO colour knob, so a rail that needed to tell "unread" from "mentions you" had to nest a <Badge> inside `badge` and got two pills, one inside the other. `initial` so the role defaults re-resolve at the call site under a scoped theme (a :root binding to a role var freezes at :root). Defaults = hsl(var(--secondary)) fill \xB7 hsl(var(--muted-foreground)) text.'},{name:"--sidebar-badge-foreground",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-badge-destructive-background",value:"initial",description:'The EMPHASIS pair, read only by `SidebarItemProp.badgeTone="destructive"` (rule #44 \u2014 a neutral row never resolves them). Defaults = hsl(var(--destructive)) fill \xB7 hsl(var(--destructive-foreground)) text, the canonical AA-checked pair.'},{name:"--sidebar-badge-destructive-foreground",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-user-focus-ring-alpha",value:"1",description:'Focus-ring alpha on the tinted shell grounds. It was 0.45, to stop the ring reading as a SELECTED item rather than a focused one \u2014 a real concern, but 0.45 composites to \u22481.90:1 against the page, so it answered it by making the indicator non-compliant with WCAG 2.2 SC 1.4.11 \u2014 colour IS the criterion for a focus indicator, so a translucent mark fails it whatever its area. The mark is opaque and the quieting comes from the halo outside it (`--focus-ring-glow-*`), which carries no criterion, and from the mark\'s light weight (one `lineWidth`, inset into the row). "Focused" is kept distinct from "selected" by the halo\'s shape, not by weakening the mark (styles/focus-ring.css).'},{name:"--topbar-chip-icon-size",value:"1.125rem",description:"Topbar glyphs. Three separate sizes, all previously baked as literals in shell-layout.css. --topbar-chip-icon-size is off the SCALE but on the pixel GRID, and those are different findings. Read the rule it styles: `display: grid; place-items: center; font-weight: 700` \u2014 it is a letter MEDALLION, not a glyph, so the half-pixel-stroke argument that made the NavigationMenu chevron snap from 14.4px to 14px does not apply here. 18px is a whole pixel sitting between --icon-size-md (16) and -lg (20); snapping it would be a visible 2px box change bought for nothing. Declared, not silently tolerated. scale-exempt: 18px letter medallion, a whole pixel between two icon steps, not a glyph"},{name:"--sidebar-product-caret-icon-size",value:"var(--icon-size-sm)",description:"Sidebar product-switcher caret \u2014 a real glyph, previously a bare 0.875rem."},{name:"--topbar-icon-size",value:"var(--icon-size-md)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-caret-icon-size",value:"var(--icon-size-xs)",description:"The caret is the eighth literal-sized icon rule in this file. The ratchet missed it because its selector says `caret` while the pattern looked for `icon|glyph` \u2014 the guard has been taught the wider vocabulary."},{name:"--topbar-icon-focus-ring-alpha",value:"1",description:"Opaque for the same reason as --sidebar-user-focus-ring-alpha above (SC 2.4.13)."},{name:"--sidebar-user-role-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-meta-foreground",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--sidebar-nav-sub-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-flyout-title-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-chip-icon-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--kbd-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-logo-mark-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-logo-mark-color",value:"initial",description:"The initial of the brand mark, whose FILL comes from the caller (`product.color`). No token can derive this ink \u2014 the library never sees that fill \u2014 and the literal it replaces measured 3.38:1 on the default `--attention` orange in all 15 theme x seed cells (gh#884). default = white at the call site"},{name:"--sidebar-avatar-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-user-name-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-gradient",value:"none",description:"Brand-chrome gradient hooks \u2014 opt-in, invisible by default. A service paints the sidebar/topbar surface by setting these to a gradient (no-op = none)."},{name:"--topbar-gradient",value:"none",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-surface-background",value:"initial",description:"THE SIDEBAR'S OWN SURFACE (gh#880). `.app-sidebar` painted a bare `hsl(var(--card))`, so the one piece of shell chrome that is ALWAYS on screen was the one a theme could not retint \u2014 the Topbar beside it has had `--topbar-background-alpha` since gh#831. Role-mirror knob: `initial`, with `hsl(var(--card))` resolved at the call site so a scoped theme's `--card` arrives. default = hsl(var(--card)) at the call site"},{name:"--sidebar-surface-background-alpha",value:"initial",description:"Its own opacity, defaulting to the card's (gh#901)."},{name:"--sidebar-backdrop-blur-size",value:"initial",description:"GLASS \u2014 `initial`, so unset there is no blur and, more importantly, no backdrop root. The sidebar is a long-lived container full of other people's content; promoting it to a containing block for fixed descendants by default would be the worst possible place to do it. default = none \u2014 the sidebar blurs nothing"},{name:"--app-shell-bar-background",value:"initial",description:"THE OTHER TWO SHELL ROWS, and they are here because leaving them out is the asymmetry this change exists to remove (gh#880). `.app-topbar` and `.app-nav-rail` are grid rows of `.app-root` \u2014 the chrome that is on screen for the whole session \u2014 and each painted a bare role with no knob while the sidebar beside them got one. THEY GET NO BLUR KNOB, deliberately. `.app-topbar` is a SIBLING of `.app-main`, not a child, so whatever vivid backdrop a theme paints inside the main region is not behind the bar and there is nothing there for a `backdrop-filter` to blur \u2014 it would be a knob that exists and does nothing, which is worse than an honest gap. The blur that IS wanted on the bar belongs to the `<Topbar>` COMPONENT inside it (`--topbar-backdrop-blur-size`, gh#831), whose backdrop is the row this knob paints. A theme that wants the whole bar to float over a gradient moves the gradient to `.app-root`; that is a theme decision, not a knob. default = hsl(var(--card)) at the call site"},{name:"--app-shell-bar-backdrop-blur-size",value:"initial",description:"The bar ROW's own blur. `--topbar-backdrop-blur-size` is NOT this knob: it is on the `<Topbar>` COMPONENT, which sits inside this row inset by `--app-shell-bar-inset` on each side, so blurring there leaves the row's gutters unblurred. The sidebar beside it has had this since gh#880; the row had none, which is what forced a theme onto the inner element. default = none \u2014 the bar row blurs nothing"},{name:"--app-shell-nav-rail-background",value:"initial",description:"default = hsl(var(--muted)) at the call site"},{name:"--app-shell-viewport-inset",value:"0px",description:"HOW MUCH OF THE VIEWPORT IS NOT THIS APPLICATION'S \u2014 0 unless something says otherwise, which is every ordinary page. A platform bar docked to a viewport edge sets it to the band it took, and the shell sizes itself to what is left instead of overflowing the window by that much."},{name:"--app-shell-bar-height",value:"var(--band-height-2xl)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-bar-inset",value:"var(--space-page-x)",description:"Inline inset and slot gap of the AppShell top bar. ONE OWNER FOR THE HORIZONTAL PAGE-INSET AXIS (gh#330). The bar sits in the SAME grid track as `.app-main`, directly above the page, so its first control and the page title are on one vertical edge \u2014 or they are supposed to be. These two knobs used to name their own values (--space-4 / --space-3) while the page named --space-page-x / --space-page-compact-x, and nothing reconciled them: measured in Chromium on /isolate/layout-app-shell the topbar's content started at x=80 while the page header's started at x=88 (1512px), and because the two sides also stepped at DIFFERENT breakpoints (shell 900px, page 720px) the error was not even constant \u2014 8px at 1512, 12px between 720 and 900, 4px below 720. A consumer cannot correct a drift that changes with the viewport. The page gutter WINS the axis, for three reasons: it is read by seven regions (page header, toolbar, body, footer, PageContainer.Inset, the DataTable full-bleed compensation, Banner) against this knob's one element; the bar is the region that must line up with the page, not the other way round (the rail is a different track with its own inset); and moving the bar moves exactly one element in one composition, while moving --space-page-x would move every page in every consumer app. The NAMES stay \u2014 a theme that already sets `--app-shell-bar-inset` keeps working, and a bar that genuinely wants to sit tighter than its page still has its own knob. Only the DEFAULTS now point at the owner. `-compact` applies below the PAGE's 720px step (not the shell's 900px restructure), so both sides tighten on the same line \u2014 see styles/shell-layout.css."},{name:"--app-shell-bar-inset-compact",value:"var(--space-page-compact-x)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-bar-gap",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-brand-max-inline-size",value:"none",description:"HOW MUCH OF THE BAR THE BRAND MAY KEEP (gh#728). A wide bar is not the problem, so the cap is `none` there; below the `sm` step the brand keeps at most a square of the row it sits in, and everything past that is cropped from the inline-end \u2014 which is the half a lockup can lose, because a lockup leads with its mark in both directions. A theme that wants the wordmark to survive on a phone raises the compact cap; a theme with a very wide lockup lowers the other. Choosing WHAT the narrow bar shows, rather than how much of it, is `AppShell logoCompact`: `viewBox` is an attribute and no stylesheet can set one."},{name:"--app-shell-brand-compact-max-inline-size",value:"var(--app-shell-bar-height)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-sidebar-width",value:"16rem",description:'Docked navigation TRACK widths \u2014 the SINGLE most-retuned shell constant (rule #45). A service that designs on a different grid sets `--app-shell-sidebar-width: 15.9375rem` (255px) once instead of forking `.app-root`. THREE WIDTHS, THREE DIFFERENT QUESTIONS \u2014 and two of them used to share the word "rail": - `--app-shell-sidebar-width` the sidebar track, expanded. - `--app-shell-sidebar-collapsed-width` the SAME track at `<AppShell sidebarCollapsed>`. - `--app-shell-nav-rail-width` a SECOND, separate track that only exists when the `navRail` slot is filled (the Slack/Teams shape). The middle one shipped as `--app-shell-rail-width` through 19.x, which read as "the width of the rail" and therefore collided head-on with the real rail added in 20.0.0 \u2014 two tokens, both 4rem, both spelled "rail", meaning entirely different things. Renamed with NO alias: an alias would resolve to a plausible width in either reading and break silently, which is precisely the failure class this package gates against everywhere else.'},{name:"--app-shell-sidebar-collapsed-width",value:"4rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-nav-rail-width",value:"2.5rem",description:"3.5rem, not the 4rem the collapsed sidebar uses. Two reasons, and both are why the default moved: at 4rem the rail's 32px controls sat in 16px of air on each side and read as a wide column rather than a rail; and a rail that happened to be exactly as wide as the collapsed sidebar made the two adjacent nav tracks fuse into one 8rem block the moment the sidebar collapsed. 3rem (48px) still clears the coarse-pointer 44px tap target, with 2px either side of a 44px control. It is a token precisely so a service that wants Slack's wider rail sets this one line \u2014 never a forked `.app-nav-rail`."},{name:"--app-shell-nav-rail-item-size",value:"var(--band-height-lg)",description:"The SIZE OF A RAIL CELL, and the reason the rail can be this narrow. The controls the rail hosts carry their own band token (`OrgSwitcher`'s collapsed trigger is a square of `--org-switcher-trigger-height`), so a narrower TRACK alone does not narrow them \u2014 it clips them, because the rail clips. The rail therefore sizes its own cells, exactly as the bar sizes a `TopbarItem` by stretching it to `--app-shell-bar-height`: chrome decides how big its cells are, the cell does not decide how big the chrome is. 2.25rem (36px) on a mouse \u2014 comfortably over the 24x24 of WCAG 2.2 SC 2.5.8 \u2014 and the coarse block below lifts it back to the 44px tap floor of rule #24, together with the track."},{name:"--app-shell-nav-rail-height",value:"var(--app-shell-nav-rail-width)",description:"The SAME rail turned 90\xB0: its thickness when `navRailPosition` is a block edge (top/bottom) and the column becomes a full-measure strip. A separate token rather than one \"size\", because a width read as a height is the kind of name that survives review and then confuses every later override. A strip is THINNER than the column, and 2.75rem is where thinner stops: `--band-height-xl` is 44px, the WCAG 2.2 AA touch floor this library states as rule #24 and enforces on every consumer, and it is also exactly `--org-switcher-trigger-height`. Below it the shell's own platform bar would be the one control on the page under the floor \u2014 and with the rail's `overflow: clip`, a control taller than the strip is clipped rather than shrunk. ONE THICKNESS, TWO AXES: it resolves to the width, so the rail is the same measure whichever edge it is docked to and a service retunes both with one line. It briefly carried a `+ 1px` for the strip's own separator \u2014 needed only while the cell was exactly as tall as the track; with `--app-shell-nav-rail-item-size` smaller than the track the border has room, and two different numbers for one rail is a worse defect than the pixel it bought."},{name:"--app-shell-nav-rail-inset",value:"var(--space-3)",description:"Block inset of the rail's own content \u2014 the counterpart of the sidebar's `--sidebar-nav-scroll-padding`, so the two navigation columns start their content on the same line under `topbarSpan=\"full\"`. It is deliberately NOT applied to the top edge under `topbarSpan=\"content\"`: there the rail runs to y=0 and its first row IS the shell's top row, so it takes the bar's band instead and the three columns share one centre line."},{name:"--app-shell-page-max-width",value:"none",description:'Optional shell-wide CONTENT cap (gh#672). Default `none`: inside AppShell the page is FLUID and spans the whole main column at every sidebar state (antd Pro Layout `contentWidth: "Fluid"`). It used to be 80rem on `.ui-page-container` as a whole, which left a 168px dead strip at a 1512px viewport once the sidebar was collapsed and cut a sticky footer short. A service that wants one bounded column sets it ONCE; it caps the page HEADER, TOOLBAR and BODY (the same bands `measure` caps) and NEVER the footer band, which is page chrome \u2014 only the footer\'s CONTENT follows it, ending on the body\'s end edge (gh#682). A page-level `measure` / `variant="narrow"` overrides it on that page. Never a page-local max-width.'},{name:"--app-shell-main-background",value:"initial",description:'Page ground behind `.app-main` (gh#399). Declared `initial` so the CALL SITE resolves the default \u2014 `var(--app-shell-main-background, var(--surface-recessed))` \u2014 against the LIVE theme: `--surface-recessed` is re-stated by the dark arm in tokens/semantic/layout.css, and a `:root` binding here would freeze it at the light value for any SCOPED dark subtree (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). It used to bind `hsl(var(--muted) / 0.4)` directly, which inverted the page/card elevation on dark (the page composited 1.015:1 LIGHTER than the cards standing on it) \u2014 see the --surface-recessed comment for the measurement. Light is byte-identical; dark now sits behind the card at 1.089:1. A service that wants its own ground still sets this token. Default = var(--surface-recessed).'},{name:"--app-shell-mobile-nav-width",value:"22.5rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-shell-mobile-nav-background",value:"initial",description:"Mobile-drawer scrim \u2014 `initial` so the shared --overlay-background default re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding freezes at :root). Default = var(--app-shell-mobile-nav-alpha) of the global scrim, i.e. rgb(0 0 0 / 0.2) out of the box."},{name:"--app-shell-mobile-nav-alpha",value:"40%",description:"Share of the global --overlay-background this drawer's scrim uses. A slide-in drawer washes the page more lightly than a modal dialog; keeping it a RATIO means a service retints the whole system with one --overlay-background and every overlay keeps its calibrated depth. A SHARE, not the resulting alpha (gh#886): the base already carries `/0.5`, so the product is 0.20. 40% of rgb(0 0 0 / 0.5) = rgb(0 0 0 / 0.20)"},{name:"--app-shell-mobile-nav-inset",value:"var(--space-1)",description:"Inline inset of the mobile drawer's scrollable nav body. Near-zero by design: the drawer nav (the <Sidebar> node by default) owns its own inset via --sidebar-nav-scroll-padding, so the generic sheet chrome inset must NOT stack on top of it (gh#211). Set it to var(--space-6) for a custom mobileNav node that wants the full sheet chrome inset."},{name:"--app-shell-mobile-nav-icon-size",value:"var(--icon-size-lg)",description:'Hamburger glyph in the drawer trigger. Bigger ON PURPOSE than the trigger Button\'s own `size="sm"` icon step (--control-icon-size-sm, 0.875rem) \u2014 it is the ONLY navigation affordance on a phone, so it reads at the 1.25rem step. A flat rem, not a density-scaled alias: it must not move with the density axis, or the one tap target that opens navigation shrinks on a compact page. Consumed as a `size-[var(...)]` utility so it outranks `.ui-button--sm svg` (see the comment at the call site in app-shell.tsx).'},{name:"--service-role-panel-list-gap",value:"0.25rem",description:"ServiceRolePanel (gh#319). `.ui-service-role-panel` shipped as a bare hook \u2014 the class was on the root but no rule existed anywhere, so the role rail's rhythm lived entirely as Tailwind literals inside the component and no theme could reach it (#45). The panel is a thin composition over MasterDetail, which still owns ALL the two-track geometry; these knobs cover only the role LIST inside the master rail. Flat rems, not `--space-*`: the literals they replace read Tailwind's own `--spacing` grid, which this package never remaps and which does not follow the density axis. Aliasing them would start scaling the rail inside a `.ui-density-*` subtree \u2014 a visual change, not a refactor. between role rows (was `gap-1`)"},{name:"--service-role-panel-row-gap",value:"0.25rem",description:"select button \u2194 delete button (was `gap-1`)"},{name:"--service-role-panel-item-title-gap",value:"0.375rem",description:"role name \u2194 lock Badge (was `gap-1.5`)"},{name:"--service-role-panel-item-padding-block",value:"0.5rem",description:"The role row is a MULTI-LINE button (name over a description/member-count line), so it opts out of the control height grid (`h-auto`) and sets its own block padding \u2014 that is what the `py-2` literal was doing. It needs the raised `.ui-service-role-panel` ancestor specificity (0,2,0) to beat `.ui-button--md { padding-block: var(--button-space-block) }` (0,1,0): layout.css is imported BEFORE control.css and both are `@layer components`, so an equal (0,1,0) rule here would silently lose."},{name:"--sidebar-brand-mark-size",value:"1.375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-height",value:"var(--band-height-md)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"ON the type scale (gh#329). This was `0.8125rem` \u2014 13px, which is not a step: the golden scale runs \u2026/ratio\xB2 \u2248 11.1 \xB7 /ratio \u2248 12.5 \xB7 base 14\u2026, so 13 sat BETWEEN two steps and every nav row in the rail read off the system's type rhythm. It had no mechanical anchor either \u2014 unlike the auth field label below, which is pinned to an artboard y-coordinate and keeps its literal with a declared `scale-exempt` \u2014 only the checked-in hi-fi source's number. GEOMETRY MOVES, by 0.53px: 13px \u2192 --font-size-xs (\u224812.47px), the step the sub-row (--sidebar-nav-sub-font-size) and the flyout title already take. Nothing reflows \u2014 the row is a fixed 2rem with `align-items: center`, and 1.5 \xD7 12.47 = 18.7px sits inside it with the same headroom 19.5px had. What is gained is that a service overriding --font-size-base now moves the rail's labels with the rest of its type, instead of leaving one constant behind."},{name:"--sidebar-nav-item-line-height",value:"1.5",description:"Line box of the nav LABEL, not the row (gh#254): `.sb-label` clips, so its line box is its clip box, and the row's `line-height: 1` shears descenders and Vietnamese tone marks. Keep >= 1.2."},{name:"--auth-account-summary-email-line-height",value:"1.5",description:"Same gh#254 trap, two more clipping boxes. `.ui-auth-account-email` and the truncating last child of `.ui-topbar-start` both clip (`overflow: hidden`/`clip` + `text-overflow: ellipsis`), so their line box IS their clip box \u2014 inheriting a tight value shears descenders and Vietnamese tone marks exactly as the sidebar label did. Keep >= 1.2."},{name:"--topbar-start-truncate-line-height",value:"1.5",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-icon-size",value:"var(--icon-size-md)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-gap",value:"0.625rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-padding-x",value:"0.625rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-gap",value:"2px",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-radius",value:"initial",description:"`initial`, not the calc() literal \u2014 a :root binding to --radius freezes there too (gh#888); default resolves at the call site. Default = calc(var(--radius) - 1px)."},{name:"--sidebar-nav-scroll-padding",value:"var(--space-3) var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-section-gap",value:"var(--space-4)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-section-label-padding-x",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-section-label-padding-bottom",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-search-width",value:"16rem",description:"The trigger's PREFERRED width, consumed as a flex BASIS \u2014 deliberately not a minimum. `.tb-search` is `width: 100%`, written for the `center` slot (flex: 1 1 0); in `start` (flex: 0 1 auto) that collapses to content width, so the trigger came out at 186px, narrower than the placeholder it holds. A hard `min-inline-size` fixed that and broke something worse: the bar's shrink contract. Measured at 1024 with a long account name, an unshrinkable trigger pushed the start cluster into the end cluster \u2014 the collision that contract exists to prevent. As a BASIS it holds this width where there is room and yields where there is not."},{name:"--topbar-search-max-width",value:"none",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-height",value:"auto",description:"Standalone <Topbar> geometry (rule #45). Topbar is a pure slot bar, so its box is intentionally QUIET by default: `auto` height and no inline inset, i.e. exactly what it did before these knobs existed \u2014 inside AppShell the `.app-topbar` grid row still owns the height. A service that places Topbar directly on a page sets `--topbar-height: 3.5rem` / `--topbar-inset: var(--space-4)` once instead of writing an app-local class. `--topbar-gap` is the gap BETWEEN the start/center/end clusters and INSIDE each of them, so one knob re-rhythms the whole bar."},{name:"--topbar-inset",value:"0px",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-gap",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-background-alpha",value:"initial",description:"THE GLASS BAR (gh#831) \u2014 the same two declarations two unrelated website showcases each hand-wrote on their own sticky header: a translucent page fill plus a backdrop blur. Both knobs are `initial`, i.e. QUIET by default in exactly the sense the paragraph above describes: a guaranteed-invalid value makes the whole declaration at the call site invalid-at-computed-value time, so `background-color` falls back to its own initial `transparent` and `backdrop-filter` to `none`. The shipped bar therefore paints nothing, creates no backdrop root, and is byte-identical to the pure slot bar it was. A service opts in with `--topbar-background-alpha: 85%` / `--topbar-backdrop-blur-size: 10px`. The TINT is NOT a knob: `.ui-topbar` reads `--background` directly at the call site, so a dark or tenant-scoped subtree re-tints the glass instead of inheriting :root's answer (docs/TOKENS.md \xB7 the `:root` freeze rule). Precedent for the blur name: --app-launcher-launchpad-backdrop-blur-size. default = none \u2014 the bar paints no fill"},{name:"--topbar-backdrop-blur-size",value:"initial",description:"default = none \u2014 the bar blurs nothing"},{name:"--topbar-center-compact-display",value:"none",description:"\u26A0 THIS KNOB DELETES CONTENT AT 1100px AND BELOW \u2014 read before you ship a center slot. At compact desktop/tablet widths the docked sidebar leaves too little inline room for three intrinsically-sized clusters, so the package hides the optional center slot before it can cover the breadcrumb/title or end utilities (gh#244). The default is `none`, which means a global search trigger placed in `center` is INVISIBLE from 1100px down \u2014 including on every phone \u2014 unless the consumer opts back in. That default arrived in 18.6.0 and removed the slot for consumers who never changed a line of their own code (gh#12); it stays because the overlap it prevents is a real defect and flipping a shipped default twice is worse than documenting it once, but it is a DECISION, not an accident: :root { --topbar-center-compact-display: flex; } \u2190 restore the slot at every width Opt back in only once the center content has a compact presentation of its own (an icon-only search trigger, a collapsing field). A page-local media query is the anti-pattern this knob replaces."},{name:"--topbar-item-padding-inline",value:"var(--space-3)",description:"TOPBAR BAR ITEM \u2014 the shape of an interactive cell IN the bar, as opposed to a control dropped into it. The bar's own chrome (Fluent's command bar, SLDS's global header, Atlassian's navigation, and the right-hand action slot of enterprise pro-layouts generally) draws a trigger as a full-height cell whose hover is the bar's surface; a `Button` in the same slot draws a --control-height pill with its own hover fill and its own ring, floating inside a taller strip. NO HEIGHT KNOB, DELIBERATELY. The cell's height IS the bar's, whatever the bar's is \u2014 `--app-shell-bar-height` inside AppShell, `--topbar-height` for a standalone Topbar, the coarse-pointer override on a touch device. A knob here would be a second answer that goes stale the moment either of those moves."},{name:"--topbar-item-padding-inline-compact",value:"var(--space-2)",description:"THE CELL'S PHONE-WIDTH INSET (godx-jp/id#639). A second value rather than a media query on the first, for the same reason `--app-shell-bar-inset-compact` is a second value: the compact number is its own design decision, and a theme has to be able to retune the two independently. Measured at 320px on a bar carrying the shipped shape (drawer trigger \xB7 logo \xB7 search trigger \xB7 four end cells): the cells alone spent 120px of a 320px viewport on padding, the bar overflowed by 44px, `.ui-topbar-start` collapsed to 0 and the search trigger was left painting 8px of itself from under the theme cell \u2014 a target axe scores at 8\xD728. At --space-2 the same bar fits with every cell whole."},{name:"--topbar-item-gap",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-min-width",value:"var(--control-height)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-radius",value:"var(--radius-sharp)",description:"Square by default: a cell that meets both bar edges has no corner to round. A service that wants the softer read sets this to var(--radius)."},{name:"--topbar-item-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--topbar-item-hover-background",value:"initial",description:"The bar's own hover surface \u2014 the same pair `.tb-icon-btn` already uses for the shell's built-in bar chrome, so a consumer-supplied cell and the shell's own read identically. default = var(--accent), resolved at the call site (the freeze rule)"},{name:"--topbar-item-hover-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--topbar-item-hover-color",value:"initial",description:"default = var(--accent-foreground), resolved at the call site"},{name:"--topbar-item-active-background",value:"var(--secondary)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-offset-block",value:"var(--space-1)",description:"COUNT PILL overlaid on the cell's glyph (gh#398) \u2014 the unread affordance the bell needs. The offsets are what a call site used to hand-write as `relative` + `absolute -end-0.5 -top-0.5`, i.e. a position the cell owns and no theme could retune; they are measured from the GLYPH box (the pill is centred on the cell, then pushed out by these), so a bar that retunes --topbar-icon-size keeps the pill on the glyph's corner. Colour mirrors `.sb-badge`: quiet by default, `badgeTone=\"destructive\"` for a count addressed to the user. The two role-mirror knobs stay `initial` so a scoped [data-tenant]/.dark override of --secondary/--destructive still reaches the pill (docs/TOKENS.md). Defaults = hsl(var(--secondary)) \xB7 hsl(var(--muted-foreground)) \xB7 hsl(var(--destructive)) \xB7 hsl(var(--destructive-foreground))."},{name:"--topbar-item-badge-offset-inline",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-size",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-padding-inline",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-background",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-foreground",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-destructive-background",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-badge-destructive-foreground",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--topbar-item-focus-ring-offset",value:"calc(-1 * var(--focus-ring-width))",description:"The mark is hosted INSIDE the cell. A full-bleed cell has no room outside itself \u2014 the bar family clips both axes (`overflow: clip` + `--focus-ring-clip-margin`) precisely because an outset ring on a flush control gets shaved \u2014 and an inset mark is also the lighter read, the same reasoning `a.ui-list-row` / `.sb-nav-item` already record in styles/focus-ring.css. The offset TRACKS the mark's own width, so the two cannot drift apart, and it multiplies by the `--focus-outline` switch through that width: switch off \u2192 width 0 \u2192 offset 0. NO GEOMETRY IS AUTHORED HERE; the cell only says where the mark sits."},{name:"--org-switcher-trigger-height",value:"var(--band-height-xl)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-trigger-padding-x",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-avatar-size",value:"var(--control-height-sm)",description:"1.75rem was the literal; --control-height-sm IS 1.75rem and is the tier this mark belongs to, so a service that re-tiers its controls moves the mark with them instead of leaving it behind."},{name:"--org-switcher-sheet-inset",value:"var(--space-3)",description:"The compact-picker inset, shared by the sheet heading and the list \u2014 see .ui-org-switcher-sheet."},{name:"--org-switcher-list-inset",value:"var(--org-switcher-sheet-inset)",description:"Where a row's LABEL starts \u2014 the same on every surface, so it lines up with the heading."},{name:"--org-switcher-list-offset",value:"0px",description:"What the SURROUNDING SURFACE insets the list by, which a row cancels so its fill and its rule reach both edges. Zero by default: the popover publishes --popover-space-inset: 0, so there is nothing to cancel there, and cancelling anyway drags the row outside the panel and puts its text on the border. The sheet, which does inset its body, overrides this."},{name:"--org-switcher-legend-space-gap",value:"var(--space-4)",description:"The keyboard legend under a modal picker \u2014 see `.ui-org-switcher-legend`."},{name:"--org-switcher-legend-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-hint-space-gap",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-dialog-width",value:"26rem",description:"The dialog surface's measure. Wider than --org-switcher-menu-width because the whole reason to reach for the dialog is that a row carries more than a name; narrower than the generic --dialog-width-default because it is still a list of choices, not a form."},{name:"--org-switcher-search-space-block",value:"var(--space-3)",description:"Breathing room above and below the search field. The INLINE side is deliberately not here: it depends on --org-switcher-list-offset, which each surface sets on itself, and a composite declared at `:root` substitutes its vars AT `:root` \u2014 it would bake in the default 0 and never see the dialog's or the sheet's value. That is the same trap --dialog-space-inset set, and it caught this rule too on the first attempt, so the inline half is computed in the rule."},{name:"--org-switcher-menu-width",value:"16rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-sheet-max-height",value:"75dvh",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--org-switcher-state-min-height",value:"8rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-panel-width",value:"20rem",description:"APP LAUNCHER \u2014 the nine-dot platform app grid in the topbar. NO TRIGGER GEOMETRY KNOB, deliberately, for exactly the reason `--topbar-item-*` declares no height: the trigger IS a `TopbarItem`, so the bar's own height and the bar's own hover surface are already its answer, and a second answer here would go stale the moment either moves. NO COLUMN-COUNT TOKEN EITHER, and that one is a GAP, not a choice: the component-token name vocabulary (scripts/check-token-tiers.mjs) has words for every length and colour and none for a count, so `--app-launcher-columns` cannot be spelled legally here. It is declared on `.ui-app-launcher-panel` in styles/shell-layout.css instead, which keeps it themeable but out of this tier. Give the vocabulary a `count` word and it moves here with the rest."},{name:"--app-launcher-panel-max-height",value:"26rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-panel-gap",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-sheet-max-height",value:"75dvh",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-grid-gap",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-tile-gap",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-tile-padding",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-tile-min-height",value:"var(--control-height-comfortable)",description:"The tap floor (rule #24, WCAG 2.2 AA 2.5.8) \u2014 a tile is a link on a phone before it is a tile on a desktop, and the comfortable control tier IS that floor."},{name:"--app-launcher-tile-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--app-launcher-tile-color",value:"initial",description:"default = var(--foreground), resolved at the call site (gh#906)"},{name:"--app-launcher-tile-hover-background",value:"initial",description:"default = var(--accent), resolved at the call site (the freeze rule)"},{name:"--app-launcher-tile-hover-background-alpha",value:"initial",description:"default = 100% at the call site (gh#901)"},{name:"--app-launcher-tile-hover-color",value:"initial",description:"default = var(--accent-foreground), resolved at the call site"},{name:"--app-launcher-tile-current-background",value:"initial",description:"The app you are already in. `initial` so the role default re-resolves at the call site under a scoped theme, the same reason `--sidebar-item-active-*` does. Default = hsl(var(--secondary))."},{name:"--app-launcher-mark-size",value:"2.5rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-mark-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--app-launcher-mark-background",value:"var(--secondary)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-mark-foreground",value:"var(--secondary-foreground)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-mark-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-name-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-group-label-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-group-label-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--app-launcher-state-min-height",value:"8rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-backdrop-background",value:"initial",description:"Role-mirror knob: `initial` so a scoped theme's --background re-resolves at the call site (docs/TOKENS.md). Default = a veil of the theme's OWN background at the alpha below."},{name:"--app-launcher-launchpad-backdrop-blur-size",value:"var(--blur-lg)",description:"16px \u2014 gh#837"},{name:"--app-launcher-launchpad-backdrop-alpha",value:"55%",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-backdrop-color-saturate",value:"180%",description:"THE INGREDIENT THAT MAKES IT GLASS RATHER THAN FOG. Blur alone averages a page towards its mean, and the mean of any real screen is a mid grey \u2014 28px of it turned a dashboard into a featureless haze with the tiles floating in nothing. Pushing chroma back up after the blur is what a physical frosted pane does: it scatters direction, not colour."},{name:"--app-launcher-launchpad-space-inset",value:"var(--space-8)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-space-safe-area",value:"0",description:"THE PART OF THE VIEWPORT THE HOST HAS ALREADY SPOKEN FOR \u2014 0 by default, because a page that owns its whole viewport has nothing to declare. A host with fixed chrome of its own (a docked platform bar, a persistent player) sets it to a padding box, and the scrim insets by that much so neither the grid nor the dismiss lands underneath. Measured without it, with a 40px rail on the inline-start edge: the first tile and the title both began at x=32 and ran 8px under the bar. A length or a 2/3/4-value box, exactly like `padding`."},{name:"--app-launcher-launchpad-panel-max-width",value:"60rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-panel-gap",value:"var(--space-8)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-grid-gap",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-tile-inline-size",value:"7.5rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-tile-padding",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-tile-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--app-launcher-launchpad-tile-gap",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-tile-hover-background",value:"color-mix( in srgb, hsl(var(--foreground)) 10%, transparent )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-mark-size",value:"4rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-mark-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--app-launcher-launchpad-mark-background",value:"color-mix(in srgb, hsl(var(--card)) 78%, transparent)",description:"The glass itself: a wash of the surface colour, not a colour of its own, so it inherits the theme and stays legible on a light page and a dark one."},{name:"--app-launcher-launchpad-mark-border-color",value:"color-mix( in srgb, hsl(var(--foreground)) 14%, transparent )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-mark-font-size",value:"var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-mark-shadow",value:"var(--shadow-lg)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-name-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-title-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-title-letter-spacing",value:"0.08em",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--app-launcher-launchpad-close-space-padding",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-item-hover-background",value:"initial",description:"THE HOVER FILL, the pair to the active one below it (gh#909). `initial`, with `hsl(var(--accent))` resolved at the call site in shell-layout.css, so an unset knob paints exactly what shipped before and a scoped `--accent` re-tint still reaches it. It exists because a dark rail on a light app could theme every other role of the sidebar \u2014 surface, item ink, icon states, the active pair \u2014 and then hovered to the GLOBAL light `--accent`."},{name:"--sidebar-item-active-background",value:"initial",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-item-active-foreground",value:"initial",description:"The open row's LABEL, at BOTH nav depths \u2014 one name since gh#651 (level 2 used to spell it `--sidebar-item-active-color`). Default = the primary ACTIVE tier, derived at the call site from the live `--primary` (gh#678). It was `--primary` itself, which clears AA on the tint only for our own seed: 4.25:1 for `204 100% 37%`, 4.00:1 for `173 80% 28%`, 4.15:1 for a dark `262 83% 70%`. The active tier steps AWAY from the ground, and measured over every seed that is legible as text on the ground at all it never lands under 4.5:1 (sidebar-active-contrast.test.ts)."},{name:"--sidebar-item-active-tint",value:"initial",description:'The level-2 dot marker (`.sb-nav-item--sub[data-active="true"]::before`) \u2014 its own knob because it is a different PART, not a second name for the label. Default = hsl(var(--primary)).'},{name:"--sidebar-item-active-background-alpha",value:"12%",description:"THE TINT STRENGTH, AND IT HAS A CEILING \u2014 rule #45, and the reason this is a knob at all. The fill is the brand at this alpha over whatever the nav sits on, so raising it walks the fill TOWARDS the label that rides on it and contrast falls monotonically. Measured on the package seed (GoDX violet #7a00ff light / #dcbcff dark, identity v2.3), with the label as the primary ACTIVE tier since gh#678 (#5400b0 light / #cd9fff dark), against the composited fill: alpha light on --card dark on --card dark on --background 0.12 8.26:1 5.89:1 6.51:1 \u2190 shipped 0.16 7.65:1 5.32:1 5.88:1 \u2190 the cap below 0.22 4.55:1 \u2190 last step still AA, dark card 0.23 4.43:1 \u2190 under SC 1.4.3 16% is a CAP WITH HEADROOM on our seed, not the cliff edge \u2014 and it is a cap on OUR seed only: over a dense grid of consumer seeds a handful of legible dark-theme seeds dip under 4.5:1 on `--card` at 16% (worst 4.27:1), while at the shipped 12% none does. A service raising the tint on its own seed owns that measurement. `sidebar-active-contrast.test.ts` fails if this rises past the cap, and names the consumer-seed exception rather than hiding it."},{name:"--auth-shell-control-height",value:"var(--control-height-comfortable)",description:"AuthShell \u2014 centred auth/login page shell. Comfortable control density (44px, WCAG touch floor) + a larger auth heading, scoped to the shell; a service re-tunes the auth card width, insets and heading size without forking."},{name:"--auth-shell-heading-size",value:"var( --font-size-2xl, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-card-max-width",value:"24rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-bar-padding",value:"var(--space-5) var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-main-padding",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-footer-padding",value:"var(--space-3) var(--space-6) var(--space-4)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-bar-gap",value:"var(--space-inline-sm)",description:"Gap between the items of the brand bar: brand to a wrapped `actions` row, and between the page-level controls inside that row (locale \xB7 theme \xB7 help)."},{name:"--auth-shell-wide-card-max-width",value:"64rem",description:'Content-slot measure for `measure="wide"` \u2014 the SPLIT login (brand panel beside the auth card). Same width as the widest CenteredShell tier, so a product\'s login and its signed-in pages read at one page measure. Only `measure="wide"` reads it; the default 24rem card is untouched.'},{name:"--auth-shell-canonical-control-height",value:"var(--band-height-lg)",description:"Canonical DXS auth preset. These are public theme knobs: consumers select the preset once on AuthShell and may retune the product theme here rather than overriding individual fields."},{name:"--auth-shell-canonical-card-max-width",value:"22.5rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-canonical-heading-size",value:"var(--font-size-base)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-canonical-main-padding",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-canonical-main-padding-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-compact-card-inset",value:"var(--space-6)",description:"INLINE (start/end) inset of the compact auth card \u2014 the column the title, fields and actions align to. Independent of the block axis below (gh#232)."},{name:"--auth-shell-card-padding-block-compact",value:"initial",description:"BLOCK (top/bottom) padding of the compact auth card \u2014 the knob that tunes canonical Login card HEIGHT without narrowing the column. Bound to the card's --card-space-shell-y, so it really reaches CardContent's block edges (before gh#232 it was wired only to --card-space-body-y and the rendered body kept the inset on both block edges \u2014 the documented token did nothing). Declared `initial` so the default mirrors the LIVE --auth-shell-compact-card-inset resolved at the CALL SITE: the canonical card renders exactly as before (24px block = 24px inline), and a service that re-tunes the inset inside a scoped `[data-tenant]` still drags the block default with it (a :root binding would freeze at the :root inset \u2014 docs/TOKENS.md). default = var(--auth-shell-compact-card-inset)"},{name:"--auth-shell-card-body-gap-compact",value:"var(--space-3)",description:"Header\u2194body gap inside the compact auth card (the breathing room under the title before the first field). Its own knob since gh#232 \u2014 it used to ride on --auth-shell-card-padding-block-compact, which conflated the section gap with the card's block padding and made the block knob un-tunable. Default is the pre-gh#232 12px rhythm."},{name:"--auth-shell-card-gap-compact",value:"var(--space-3)",description:"IN-SLOT stack gap of the compact auth card (title \u2195 description inside the header)."},{name:"--auth-shell-main-align",value:"center",description:"Main-axis alignment of the auth column. Default `center` = today's vertically-centred card; a flow whose intro + card + footnote stack is tall opts into `start` via this knob."},{name:"--auth-shell-card-stack-gap",value:"0px",description:"Gap between the direct sections of the auth column (intro \xB7 card \xB7 remember row). Default 0 (quiet, rule #44) so an existing single-card consumer is untouched; presets opt in."},{name:"--auth-shell-login-card-max-width",value:"22.5rem",description:"Login preset (gh#237) \u2014 canonical SCR-001 anchors at 1440x900, 1024x900 and 390x844. The 112px identity slot is deliberately taller than a two-line real requester. Identity content aligns to the slot end, so missing/one-line/two-line requester data changes only the empty space above it, never the card or footer position. The flow starts at y=231 desktop and y=221 mobile: 231/221 + 112 + 20 gap = card y=363/353. Literal artboard lengths belong here, not in a consumer selector, and do not drift with --scaling."},{name:"--auth-shell-login-flow-offset-block",value:"14.4375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-flow-offset-block-mobile",value:"13.8125rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-main-padding-inline",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-main-padding-inline-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-main-padding-block-end",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-identity-slot-block-size",value:"7rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-card-stack-gap",value:"1.25rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-login-card-padding-block-compact",value:"var(--auth-shell-compact-card-inset)",description:"Canonical SCR-001 block inset is a FLAT 24px \u2014 the same measure as the inline inset. The card draws its own 1px border and a border-box rect already contains it, so the former `+ 2 x --control-border-width` double-counted the border and pushed the passkey CTA to y=390 instead of the canonical y=388 (gh#263)."},{name:"--auth-shell-device-card-max-width",value:"23.75rem",description:"Device-authorization preset \u2014 380px card measure, 15px block \xB7 5px inline mobile gutter (at a 390px viewport the card is x=5px, width=380px)."},{name:"--auth-shell-device-main-padding",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-device-main-padding-mobile",value:"0.9375rem 0.3125rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-device-otp-slot-inline-size",value:"1.71875rem",description:'CODE FIELD measure \u2014 the preset owns it (gh#12). A device grant is the one canonical flow whose PRIMARY control is the code field, so leaving it on the generic square --otp-slot-size made the preset own the page but not its own subject: two 4-slot `appearance="grouped"` boxes rendered 146x38 (4 x the canonical 36px control tier + the 1px group border) against a 112x54 artboard. These are the per-slot boxes that ADD UP to that artboard group: inline 27.5px x 4 + 2 x 1px group border = 112px block 52px + 2 x 1px group border = 54px Literal artboard lengths, like every other preset measure here \u2014 they must not drift with --scaling. A service that groups its code differently overrides --otp-slot-inline-size / --otp-slot-block-size on its own field; the generic square knob is untouched everywhere else.'},{name:"--auth-shell-device-otp-slot-block-size",value:"3.25rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-context-card-max-width",value:"25rem",description:"Context-selection preset \u2014 25rem card measure on desktop/tablet, edge-to-edge on mobile (0 inline gutter) with a 16px rhythm between the intro, the card and the remember row."},{name:"--auth-shell-context-main-padding",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-context-main-padding-mobile",value:"var(--space-6) 0",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-context-card-stack-gap",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-recovery-card-max-width",value:"27rem",description:"Account-recovery preset (gh#233) \u2014 the SCR-008 measure shared by the password-recovery panel (request \xB7 sent \xB7 new-password \xB7 expired) and the sign-in MFA challenge panel (OTP \xB7 recovery-code \xB7 passkey-failure). Both canonical desktop panels measure w=432 at 1440, so ONE preset owns them; the 360px canonical Login measure is untouched. The mobile gutter is a DECIDED contract, not a traced artboard: the supplied 390 reference is a desktop 2x2 composite that crops horizontally and cannot be measured. 15px inline at 390 \u21D2 the panel is x=15, width=360 \u2014 the same page rhythm as the canonical Login flow, so a user moving from Login to Recovery on a phone never sees the surface jump."},{name:"--auth-shell-recovery-main-padding",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-recovery-main-padding-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-card-max-width",value:"22.5rem",description:"Registration preset (gh#256) \u2014 the canonical sign-up measure. Two things make it structurally different from every preset above, and both are the reason it could not be expressed by re-using `login`: 1. LONG-FORM SCROLLING. A registration card is the tallest surface in the hosted-identity set (name \xB7 email \xB7 password \xB7 confirm \xB7 strength meter \xB7 consent \xB7 submit \xB7 provider row), and a vertically CENTRED tall card clips its own top on a short viewport \u2014 the top overflows above the scroll origin and becomes unreachable. So the column is start-aligned and the block-start inset becomes ordinary page padding the user can scroll past. 2. FOOTER CLEARANCE. The legal/consent footer must never be flush against the submit button at the end of a long scroll, so the block-end inset is a knob of its own rather than mirroring the block-start one. The 360px form measure and the 15px mobile inline gutter match the canonical Login flow exactly (22.5rem card, x=15 at 390 \u21D2 width=360), so a user moving sign-in \u2192 sign-up on a phone never sees the surface jump."},{name:"--auth-shell-registration-main-padding-block-start",value:"1rem",description:"Block-start PAGE GUTTER \u2014 the floor the column keeps against the viewport edge once the auto margins in shell-layout.css have placed it. It is deliberately NOT the artboard offset any more. It used to be 9.5rem / 8.875rem, derived from the canonical SCR-002 anchor (card y=284 at 1440x900 and y=274 at 390x844, each the offset plus the 112px identity slot plus the 20px stack gap). Held as unconditional padding, that constant manufactured a scrollbar out of nothing: at 1440x900 the column measured 152px of EMPTY SPACE + 793px of content + 48px, i.e. 993px in a 900px viewport, so the page scrolled 93px and the scrolled region was blank. A sign-up form whose first field sits below the fold because of decoration is a worse failure than a lost artboard anchor, so the anchor yields. Both values are still public knobs: a product that wants the literal artboard back sets this to 9.5rem and accepts the overflow on a short viewport."},{name:"--auth-shell-registration-main-padding-block-start-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-main-padding-inline",value:"1rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-main-padding-inline-mobile",value:"0.9375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-main-padding-block-end",value:"3rem",description:"Footer clearance \u2014 the gap the legal footer keeps below the end of a long form."},{name:"--auth-shell-registration-main-padding-block-end-mobile",value:"2rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-card-stack-gap",value:"1.25rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-registration-identity-slot-block-size",value:"7rem",description:"Fixed identity track, the same 112px `login` proved (gh#237). Without it the card anchor moves with the title/requester line count, so the canonical y above would hold for exactly one copy length and drift for every other. The slot absorbs absent / one-line / two-line identity content instead."},{name:"--auth-shell-divider-gap",value:"0.625rem",description:"Labelled auth divider geometry. The canonical SCR-001 divider row is 19px tall at an 11px label (the artboard label inherits the page's line-height instead of collapsing to a 1.0 line box). 19/11 is that RATIO, not a pin: it holds the row proportional when the label's step moves, which is exactly what gh#329 did to it. The previous hardcoded `line-height: 1` rendered an 11px row, sitting the whole lower half of the Login card 8px high (gh#263). ON the type scale (gh#329): the label was the literal `0.6875rem` (11px) and is now --font-size-2xs, the scale's ratio\u207B\xB2 step \u2248 11.107px \u2014 the same step the sidebar section label, the kbd cap and the chrome page subtitle already take. GEOMETRY MOVES by 0.11px on the label and 0.19px on the row (19 \u2192 19.19px), i.e. a fifth of a pixel, and in exchange the auth micro-scale finally rides the service's --font-size-base like everything else. 11 was never a step; it was 2xs rounded to the nearest whole pixel and then written down as if it were."},{name:"--auth-shell-divider-label-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-divider-label-line-height",value:"calc(19 / 11)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-divider-rule-color",value:"var(--border)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-divider-label-color",value:"initial",description:"default = var(--muted-foreground), resolved at the call site (gh#906)"},{name:"--auth-identity-gap",value:"0.375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-requester-gap",value:"0.375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-requester-icon-size",value:"var(--icon-size-md)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-requester-glyph-size",value:"var(--icon-size-2xs)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-min-height",value:"var(--control-height-comfortable)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-gap",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-padding",value:"var(--space-1) var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-identity-min-width",value:"12rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-avatar-size",value:"var(--control-height-sm)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-avatar-glyph-size",value:"var(--control-icon-size-sm)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-account-summary-email-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-footer-content-gap",value:"0.375rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-footer-text-font-size",value:"var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )",description:"The same 11px \u2192 2xs snap as the divider label above (gh#329); this one carried no artboard anchor at all, only the literal. GEOMETRY MOVES by 0.11px."},{name:"--auth-footer-target-min-size",value:"var(--touch-target-min)",description:"The legal links sit at --font-size-2xs, so their line box alone is ~19px and every auth page failed WCAG 2.2 SC 2.5.8 on Terms / Privacy / the locale trigger. The floor is applied to the link BOX rather than a ::after hit area: the target a user (and an audit) measures is the element itself, and an invisible overlay that still reports 19px is not a fix. Text metrics are untouched \u2014 only the box grows."},{name:"--auth-stack-gap",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-field-label-gap",value:"var(--space-1)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--auth-shell-field-label-font-size",value:"0.75rem",description:"scale-exempt: SCR-001 pins the email input at y=489; --font-size-xs (12.47px) drifts the 18px label box to 18.7px (gh#263)"},{name:"--auth-shell-field-label-line-height",value:"1.5",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-bar-height",value:"var(--app-shell-bar-height)",description:"CenteredShell \u2014 authenticated, no-sidebar, centred-column page shell (hosted-ID \"My Page\", account, standalone settings). The bar mirrors AppShell's `.app-topbar`: the same fixed height, and now the same HORIZONTAL PAGE-INSET AXIS (gh#330) \u2014 bar, main and footer all read the page gutter and all step to the compact gutter on the page's own `(max-width: 720px)` line, so the bar's content and the column beneath it share one content edge at every width. The comment here used to claim the bar mirrored `.app-topbar`'s inline padding. It did not, and had not since gh#330 moved that side onto --space-page-x: the bar was left hard-coding --space-4 (16px) while main and footer used --space-6 (24px). Measured in Chromium on /isolate/layout-centered-shell BEFORE this fix, the bar's content sat at x=16 and the column at x=24 \u2014 a constant 8px misalignment at every width from 784px down to 390px. 784 is not arbitrary: it is the md tier (46rem) plus the two 24px main gutters, the width below which the column stops being centred and pins to the gutter, which is what makes the error visible. AFTER: 24/24 at 784 and 760, 16/16 at 700 and 390. The column max-width has three tiers, all wider than the 24rem auth card. A service retunes the inset, block padding and each width tier without forking CSS."},{name:"--centered-shell-bar-padding-x",value:"var(--space-page-x)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-bar-padding-x-compact",value:"var(--space-page-compact-x)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-main-padding",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-main-padding-inline-compact",value:"var(--space-page-compact-x)",description:"Inline-only compact steps. They exist as their own knobs rather than as a redefinition of the shorthands above, so `--centered-shell-main-padding` keeps meaning all four sides and a service that already sets it is not broken by this fix."},{name:"--centered-shell-footer-padding",value:"var(--space-3) var(--space-6) var(--space-4)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-footer-padding-inline-compact",value:"var(--space-page-compact-x)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-column-offset-block",value:"0",description:'Block offset of the centred column inside the 100dvh shell. `0` (default, the quietest state \u2014 rule #44) keeps the top-aligned flowing page; `auto` centres the column in the viewport, which is what CenteredShell `align="center"` sets for a SYSTEM-level standalone surface (500/503 error page, maintenance notice). Auto block offsets collapse to 0 when the content is taller than the viewport, so a long localized message scrolls from the top instead of clipping.'},{name:"--centered-shell-width-sm",value:"32rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-width-md",value:"46rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-width-lg",value:"64rem",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-landing-max-width",value:"67.5rem",description:'CenteredShell \xB7 public-landing preset (gh#252) \u2014 the token-owned geometry of a PUBLIC marketing / product landing page: one content measure shared by header, main column and footer, the section rhythm between page sections, the flat (chrome-quiet) card presentation and the hero heading tier. Every value is a service-themeable knob (rule #45): a landing composition is a COMPOSITION of real primitives (docs/COMPOSITION-VS-COMPONENT.md \u2014 Hero/Navbar/Footer FAIL the Framework-Component Test), so the consumer must never own geometry or a media query. These knobs are read ONLY under `.ui-centered-shell[data-preset="public-landing"]`, so the default shell \u2014 which emits no `data-preset` at all \u2014 is byte-identical to before. 1080px \u2014 header/main/footer share ONE measure'},{name:"--centered-shell-landing-inset-inline",value:"var(--space-6)",description:"24px page gutter \u2265 40rem"},{name:"--centered-shell-landing-inset-inline-compact",value:"var(--space-4)",description:"16px page gutter < 40rem"},{name:"--centered-shell-landing-main-padding-block",value:"var(--space-10)",description:"40px"},{name:"--centered-shell-landing-main-padding-block-compact",value:"var(--space-6)",description:"24px"},{name:"--centered-shell-landing-section-gap",value:"var(--space-10)",description:"rhythm BETWEEN page sections"},{name:"--centered-shell-landing-section-gap-compact",value:"var(--space-6)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-landing-footer-padding-block",value:"var(--space-8)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-landing-card-shadow",value:"none",description:"Chrome is a token, default quiet (rule #44): a landing surface is FLAT \u2014 no card elevation \u2014 so a service opts back IN with `--centered-shell-landing-card-shadow: var(--card-shadow)`."},{name:"--centered-shell-landing-heading-size",value:"var(--font-size-display)",description:"Hero heading tier. The preset re-points `--heading-h1` (same mechanism as `.ui-auth-shell` \u2192 `--auth-shell-heading-size`), so a hero title is a real `Heading level={1}` and never a consumer font-size."},{name:"--centered-shell-landing-heading-size-compact",value:"var( --font-size-3xl, calc(var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)) )",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--centered-shell-landing-background",value:"initial",description:'Role-mirror knob \u2014 MUST stay `initial`, with the role default at the CALL SITE (`var(--centered-shell-landing-background, var(--background))`), so a scoped `[data-tenant]` / `.dark` override of `--background` still reaches it (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Documented default = hsl(var(--background)) \u2014 a public page is the plain page canvas, not the app\'s `--muted` chrome.'},{name:"--app-shell-bar-height",value:"var(--band-height-3xl)",description:"Rule #24 companion (gh#291): on coarse pointers --control-height grows to 2.75rem (44px tap floor), and the shell bar sits flush with the viewport top \u2014 a 3rem bar leaves the control's 3px focus ring painting ABOVE y=0, off-screen, which no overflow setting can recover. 3.5rem gives 6px of breathing per side."},{name:"--app-shell-nav-rail-width",value:"3rem",description:"Same rule #24 companion for the second navigation track: a finger gets the 44px floor back, and the track widens with the cell so the cell is not clipped by the rail it sits in."},{name:"--app-shell-nav-rail-item-size",value:"var(--band-height-xl)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-height",value:"var(--band-height-xl)",description:"And for the Sidebar's own rows (gh#1138): measured 32px under a finger while the Tree rows and SearchInput beside them had already grown to 44 with the control ladder."},{name:"--mobile-shell-block-size",value:"100dvh",description:'MobileShell (gh#354 \xA76) \u2014 the handheld app shell: a status band, an app bar, ONE scroll region, a sticky action bar and a bottom tab bar. Two facts here cannot be reached by composition, which is why they belong to the shell and not to the page: 1. The shell is the only scroll container. The root is exactly one viewport tall (`--mobile-shell-block-size`), so the document itself never scrolls and the chrome bands never leave the screen \u2014 the reason a composed `Card` + `overflow-y-auto` stack drifts on a real phone, where the URL bar collapses under the page. 2. Every band absorbs the device safe-area insets, so a notch never covers the app bar and the home indicator never covers the primary verb. The safe-area knobs are `env()` values and are therefore ZERO on every surface with no insets (desktop, jsdom, the docs frames) \u2014 the geometry below is unchanged there. The INLINE knob takes `max()` of BOTH physical insets on purpose: `env(safe-area-inset-left)` is physical, so binding it to the inline START would be wrong under `dir="rtl"`. A symmetric inset is correct in both writing directions and costs at most a few px on the non-notch side in landscape. A service retunes the page gutter, the three band heights and the block padding from its theme; nothing here is reachable only through a consumer selector.'},{name:"--mobile-shell-max-inline-size",value:"26.875rem",description:'430px \u2014 the widest logical width the current handheld class reports (iPhone Pro Max / Pixel Pro XL). It is a CAP, so it has to sit at or above every real device width the shell is meant to be read at; below that, `width="phone"` would squeeze the very screens it exists to serve. Only `width="phone"` reads it; the default `fill` never does.'},{name:"--mobile-shell-safe-inset-block-start",value:"env(safe-area-inset-top)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-safe-inset-block-end",value:"env(safe-area-inset-bottom)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-safe-inset-inline",value:"max(env(safe-area-inset-left), env(safe-area-inset-right))",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-inset-inline",value:"var(--space-4)",description:"Page gutter shared by every band AND by the scroll region, so the app-bar title, the list rows and the sticky action bar sit on ONE content edge \u2014 the axis gh#330 had to repair for CenteredShell after the bar and the column drifted 8px apart."},{name:"--mobile-shell-control-height",value:"var(--control-height-comfortable)",description:"Touch tier for the WHOLE shell subtree, the same technique `.ui-auth-shell` uses. Rule #24's 44px floor is already reached on a coarse pointer through --control-height, but a handheld app is touch-first BY DEFINITION \u2014 it must not render 32px targets merely because it is being previewed with a mouse, or because a service ships it in an Electron/desktop wrapper."},{name:"--mobile-shell-region-gap",value:"var(--space-2)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-status-bar-height",value:"var(--band-height-lg)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-header-bar-height",value:"var(--band-height-3xl)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-tab-bar-height",value:"calc(var(--band-height-3xl) + var(--space-2))",description:"4rem. A tab bar is an icon stacked over a label, so it is one step TALLER than the app bar; there is no 64px band step, so it derives from the 3.5rem one (tier 2a)."},{name:"--mobile-shell-main-padding-block",value:"var(--space-4)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--mobile-shell-actions-padding-block",value:"var(--space-3)",description:"Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text knobs (rule #45/#46). A service re-tunes chrome text without moving the global scale."},{name:"--sidebar-nav-item-foreground",value:"initial",description:"Resting nav row + label (also the resting sub-row). Default = hsl(var(--muted-foreground))."},{name:"--sidebar-nav-item-hover-foreground",value:"initial",description:"Hovered nav row + label. Default = hsl(var(--foreground))."},{name:"--sidebar-nav-item-disabled-foreground",value:"initial",description:"`aria-disabled` nav row + label. Default = the resting row colour."},{name:"--sidebar-nav-icon-foreground",value:"initial",description:"Nav ICON (`.sb-icon`, incl. the collapsed rail and group triggers). Default = currentColor, i.e. the row colour \u2014 the pre-gh#228 look. Set this alone to get canonical dark icons next to muted labels."},{name:"--sidebar-nav-icon-hover-foreground",value:"initial",description:"Icon on a hovered / active / disabled row. Each falls back to --sidebar-nav-icon-foreground, then to currentColor, so setting the base icon knob alone themes every state."},{name:"--sidebar-nav-icon-active-foreground",value:"initial",description:'Sidebar nav-row COLOUR knobs (gh#228). The row/label and its icon are separately themeable: before this, `.sb-nav-item` painted one `--muted-foreground` that the Lucide SVG inherited, so a service could only darken its 16px nav icons by writing page-local CSS or by re-tinting every muted text globally. Geometry knobs (--sidebar-nav-icon-size, --sidebar-nav-item-height/-gap/ -padding-x) live in components/shell.css and are untouched by these. ROLE-MIRROR KNOBS \u2014 declared `initial` here with the role default at the CALL SITE (`var(--knob, hsl(var(--role)))`), so a scoped `[data-tenant]` / `.dark` role override re-resolves live instead of freezing at :root (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Every default is byte-identical to the pre-gh#228 rendering. The ACTIVE row\'s own background/foreground keep their existing knobs (--sidebar-item-active-background / --sidebar-item-active-foreground, components/shell.css); only the active ICON gets a new one.'},{name:"--sidebar-nav-icon-disabled-foreground",value:"initial",description:'Sidebar nav-row COLOUR knobs (gh#228). The row/label and its icon are separately themeable: before this, `.sb-nav-item` painted one `--muted-foreground` that the Lucide SVG inherited, so a service could only darken its 16px nav icons by writing page-local CSS or by re-tinting every muted text globally. Geometry knobs (--sidebar-nav-icon-size, --sidebar-nav-item-height/-gap/ -padding-x) live in components/shell.css and are untouched by these. ROLE-MIRROR KNOBS \u2014 declared `initial` here with the role default at the CALL SITE (`var(--knob, hsl(var(--role)))`), so a scoped `[data-tenant]` / `.dark` role override re-resolves live instead of freezing at :root (docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`"). Every default is byte-identical to the pre-gh#228 rendering. The ACTIVE row\'s own background/foreground keep their existing knobs (--sidebar-item-active-background / --sidebar-item-active-foreground, components/shell.css); only the active ICON gets a new one.'},{name:"--table-row-height-compact",value:"var(--band-height-sm)",description:"Table component tokens: row height, cell padding."},{name:"--table-row-height-default",value:"var(--band-height-md)",description:"Table component tokens: row height, cell padding."},{name:"--table-row-height-comfortable",value:"var(--band-height-xl)",description:"Table component tokens: row height, cell padding."},{name:"--table-row-height",value:"calc(var(--table-row-height-default) * var(--scaling))",description:"Table component tokens: row height, cell padding."},{name:"--table-cell-padding-y",value:"var(--space-2)",description:"Table component tokens: row height, cell padding."},{name:"--table-cell-space-x",value:"initial",description:"THE CELL'S INLINE INSET \u2014 and it is the CARD'S inset, not the control's (gh#849). Measured on /showcase/table-pagination at 1440px, gap from the card's inner edge: card header (title / count) 17px table th/td (column text) 13px <- the odd one out pagination footer 17px One card, three horizontal bands, two optical axes. The table read the CONTROL step (--control-padding-x, 12px) while the card read the SECTION step (--card-space-inset -> --space-section-active, 16px), and a table is the flush body of a card more often than it is anything else \u2014 so the two steps meet at the same edge on the most common composition this library ships, and the table sits 4px inboard of the header above it and the footer below it, on BOTH edges. It cannot be settled in the footer: --table-pagination-padding-x defaults to THIS token so the \"rows per page\" label lands on the first column's text axis, so the footer follows the columns by design. Either the cells move to the card's inset or the card's own chrome disagrees with its content forever. IBM Carbon \u2014 this repo's spacing authority (docs/DESIGN-AUTHORITY.md) \u2014 gives DataTable and Tile the same 16px inline inset for exactly this reason. Both 12 and 16 are legal Carbon steps; the RELATIONSHIP is what was wrong, not the number. `initial`, not `var(--space-section-active)`, per docs/TOKENS.md - \"Role-mirror knobs MUST be `initial`\". The old binding was a :root var() and it FROZE: probed in Chromium, setting --control-padding-x on the card left the cell padding at 12px, and on a subtree with --scaling .92 the control step resolved to 11.04px while the cell still used the root's unscaled 12px. A token that claims to track another and silently does not is worse than one that never claimed it. default = var(--space-section-active)"},{name:"--table-cell-indent-space-step",value:"var(--space-4)",description:"Hierarchy indent step for `<TableCell indent={depth}>` (gh#354). The cell's inset is `--table-cell-space-x + depth \xD7 this step`, so level 0 sits exactly on the column's own text axis and every further level is one step in. Owned here rather than as a magic expression in JSX (the trap `--tree-select-depth-space-step` was pulled out of), so a denser service dials the step down \u2014 or to `0` for a flat table \u2014 without touching a call site."},{name:"--table-border-color",value:"initial",description:"Cell-grid rule colour for `<Table bordered>` (gh#274) \u2014 the outer frame and the vertical rules between columns. Declared `initial` so the default re-resolves to the LIVE --border role at the call site (a :root binding to hsl(var(--border)) freezes at the :root value and a scoped [data-tenant] override of --border would never reach it \u2014 docs/TOKENS.md). Default = hsl(var(--border))."},{name:"--table-pagination-padding-y",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-pagination-padding-x",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-surface-min-inline-size",value:"640px",description:'DataTable surface \u2014 narrow-viewport legibility FLOOR (gh#253). Below the `sm` viewport step a multi-column admin grid whose columns are `white-space: nowrap` would otherwise be crushed, so the bordered surface keeps a minimum inline size and `.ui-data-table-scroll` scrolls instead. This shipped as a hard-coded `min-w-[640px]` utility on the surface element, which left a service that wants a narrower (or no) floor with no route but forking the component (#45). Default = the previous literal, in px so the floor releases at EXACTLY the same width as the px-based `sm` media query that clears it (a rem value would drift under a non-16px root and re-introduce the scroll between the two thresholds). Set `0` to opt out entirely \u2014 which is what `preset="action-collection"` does, because there the priority measures own the width.'},{name:"--table-head-font-size",value:"var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))",description:"Table component tokens: row height, cell padding."},{name:"--table-head-font-weight",value:"var(--font-weight-medium)",description:"Header WEIGHT (gh#410). Was the literal `var(--font-weight-medium)` in table-layout.css, which left a service that wants a quiet header row writing `font-normal` on every `<TableHead>` \u2014 18 of them in the app that reported this. Default is byte-identical; a quiet header is now one declaration (`--table-head-font-weight: var(--font-weight-normal)`)."},{name:"--table-header-background",value:"initial",description:"Header band \u2014 its OWN bg + fg knobs (decoupled from --secondary). Declared `initial` so the default re-resolves to the LIVE --muted / --muted-foreground roles at the call site: a :root binding to a role var freezes at the :root value and a scoped [data-tenant] role override never reaches it. A brand sets both header tokens together to keep band/text contrast. Defaults = hsl(var(--muted)) band \xB7 hsl(var(--muted-foreground)) text."},{name:"--table-header-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--table-header-foreground",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-surface-background",value:"initial",description:"THE DATATABLE FRAME ITSELF (gh#880). Every band, row state and header inside the table has had a knob for some time; the box that draws the frame around them had none and painted no fill at all, so a themed page could retint the contents of a table and not the table. Unset, the declaration is invalid-at-computed-value-time and `background-color` keeps its own initial `transparent` \u2014 which is exactly what the surface painted before, so nothing moves. default = transparent, i.e. what the frame already had"},{name:"--table-surface-background-alpha",value:"initial",description:"`initial` keeps the shipped contract: with no fill asked for, the whole declaration is invalid-at-computed-value-time and the surface stays transparent."},{name:"--table-surface-backdrop-blur-size",value:"initial",description:"GLASS \u2014 `initial`, no blur and no backdrop root. A DataTable holds sticky/pinned columns; a backdrop root here would change what `position: fixed` inside the frame resolves against. default = none \u2014 the frame blurs nothing"},{name:"--table-pin-shadow",value:"-6px 0 6px -5px hsl(var(--foreground) / 0.12)",description:"Inline-end shadow that lifts a pinned (sticky) action column off the body it scrolls over."},{name:"--table-fixed-shadow-start",value:"6px 0 6px -5px hsl(var(--foreground) / 0.12)",description:'The same lift for a column frozen to the inline START (antd `fixed: "start"`), pointing the other way. `box-shadow` has no logical offset, so the writing direction needs its own value \u2014 the RTL companion is a token rather than a literal in the stylesheet so a service that retunes one edge cannot leave the other behind.'},{name:"--table-fixed-shadow-start-rtl",value:"-6px 0 6px -5px hsl(var(--foreground) / 0.12)",description:"Table component tokens: row height, cell padding."},{name:"--table-expand-column-width",value:"2.5rem",description:"Leading column that carries the expand affordance (antd `expandable`). Sized like the selection column beside it so the two leading columns read as one gutter."},{name:"--table-summary-background",value:"initial",description:"Footer totals row (antd `summary`). `initial` so the --muted default re-resolves under a scoped theme, exactly like the row-state washes above. Default = hsl(var(--muted))."},{name:"--table-summary-border-width",value:"initial",description:"default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--table-row-expanded-background",value:"initial",description:"Wash behind an expanded detail row, so the panel reads as belonging to the row above it. Default = hsl(var(--muted) / 0.3), the same weight as the selected-row tint. It fades out as --table-row-striped-alpha comes in: on a striped table the stripe ties the panel to its row."},{name:"--table-row-expanded-padding",value:"initial",description:"Inset of the expanded detail cell (gh#1083). `initial` so the default \u2014 the cell's own padding, var(--table-cell-padding-y) var(--table-cell-space-x), which follows density \u2014 re-resolves at the call site. `expandable.flush` drops it."},{name:"--table-selection-menu-gap",value:"var(--space-1)",description:"Gap between the header checkbox and the `selections` dropdown trigger beside it."},{name:"--table-row-striped-background",value:"initial",description:"Row-state tint washes \u2014 translucent muted over the opaque base. `initial` so the --muted default re-resolves under a scoped theme; a service retints by reading another role (e.g. --primary). Defaults = hsl(var(--muted) / 0.8) striped \xB7 hsl(var(--accent) / 0.7) hover \xB7 hsl(var(--muted) / 0.3) selected. The stripe was --muted / 0.4 until gh#700 measured it: 1.02:1 against the plain row in light, i.e. not a stripe. 0.8 is the strongest --muted step that keeps every text role on it at AA with the control boundary still at 3:1 (muted-foreground 5.29 light / 5.71 dark, --input 3.24 / 3.31) and leaves the --accent hover a visible step beyond it in both themes \u2014 src/tokens/__tests__/table-stripe-contrast.test.ts recomputes all of it."},{name:"--table-row-striped-alpha",value:"0%",description:"Zebra SWITCH (gh#700) \u2014 how much of --table-row-striped-background every EVEN logical body row paints: `0%` = no stripe (the default, byte-identical to an unstriped table), `100%` = the full stripe. It is the percentage a `color-mix(\u2026 , transparent)` reads at the row, so it is a ratio and not a flag: a theme may also dial a lighter stripe (`60%`). It is a SHARE OF the stripe colour rather than the resulting alpha (gh#886) \u2014 the base default `hsl(var(--muted) / 0.8)` already carries an alpha, so `100%` composites to 0.8 and `60%` to 0.48. THE SERVICE-WIDE DEFAULT IS THIS ONE LINE: `:root { --table-row-striped-alpha: 100%; }` stripes every Table and DataTable. The `striped` prop is the per-instance override on top of it \u2014 `striped` sets `100%` on that table, `striped={false}` sets `0%`, and leaving the prop out inherits whatever the theme chose. A plain length is not a role mirror, so it lives on :root without the freeze rule (docs/TOKENS.md)."},{name:"--table-row-hover-background",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-row-hover-background-alpha",value:"initial",description:"default = 0.7 at the call site"},{name:"--table-row-selected-background",value:"initial",description:"Table component tokens: row height, cell padding."},{name:"--table-row-selected-background-alpha",value:"initial",description:"default = 0.3 at the call site"},{name:"--table-action-collection-primary-width",value:"18%",description:'Table \xB7 action-collection preset (gh#253) \u2014 the canonical dense approval / action queue. Column PRIORITY measures replace the desktop intrinsic widths (a nowrap free-text column is what makes a five-column queue wider than its card and forces a horizontal scroll). Nothing here is read unless `preset="action-collection"` is set, so every existing table is untouched. Percentages so the ratio holds at any card width; the action affordance is an absolute measure because it must never be squeezed below its touch target. requester / subject'},{name:"--table-action-collection-secondary-width",value:"22%",description:"target / resource"},{name:"--table-action-collection-meta-width",value:"12%",description:"timestamps, ids \u2014 lowest priority"},{name:"--table-action-collection-actions-width",value:"3.5rem",description:"row-action affordance: a FLOOR, not a cap \u2014 Table grows the column to a wider actions cell content (a text button + `\u2026` menu), gh#1067"},{name:"--table-action-collection-primary-width-compact",value:"24%",description:"Compact tier, applied below the collapse step (the 390px acceptance frame). Percentages, like the desktop tier: while the priority ratios FIT (the canonical queues up to the six-column budget below), they keep the table filling its container edge-to-edge with no horizontal scroll \u2014 the gh#253 acceptance."},{name:"--table-action-collection-secondary-width-compact",value:"22%",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-meta-width-compact",value:"20%",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-actions-width-compact",value:"2.75rem",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-primary-width-floor",value:"6rem",description:'Wide-collection FLOORS \u2014 the compact measures wherever the priority budget is OVER-SUBSCRIBED (gh#262, gh#844). Percentage measures stop working once a queue carries enough columns for the shares to sum past 100%: `table-layout: fixed` NORMALIZES them back into the table\'s specified width, so at ~10 columns on a 390px frame a "24%" column really renders at a tenth of the frame, every column drops below one CJK glyph, and JA headers shred into a vertical one-character-per-line column (the failure mode WCAG 2.2 SC 1.4.10 Reflow exists to prevent). Cell `min-inline-size` is inert in the fixed algorithm, `max(%, length)` resolves to neither operand (below), and the intrinsic (max-content) size of a fixed-layout table is degenerate \u2014 all in Chromium \u2014 so a LENGTH is the only floor an engine respects: length columns are never squeezed, and when their sum outgrows the container the table\'s used width grows past its specified 100% (CSS 2.1 \xA717.5.2.1) into the keyboard-reachable overflow-x wrapper, which scrolls. ONE-dimensional scrolling of a data table is explicitly permitted by SC 1.4.10; one-character-per-line is not readable at all. The stylesheet switches tiers on the BUDGET, not on width. The budget is one column per priority tier plus one free-text column; the floors engage wherever a queue asks for more than that, and a queue that fits it keeps its scroll-free percent tier byte-for-byte. Two ways to ask for more, and gh#262 only saw the first: SEVEN COLUMNS. With five distinct column kinds, seven columns must repeat something, so the shares are guaranteed to over-sum (gh#262 expectation 3). A REPEATED TIER, at ANY column count (gh#844). The compact measures are per-column percentages, NOT shares of a sum: a `primary` column is 24% of the table whether the table has three columns or six. So the column count does not predict readability at all \u2014 what over-subscribes the budget is repeating a tier, and the surplus comes out of the `auto` free-text column. Measured at 390 with a 340px card content box, a FIVE-column JA queue carrying two `meta` columns left its free-text column 47.6px wide: 15 glyphs over 8 line boxes, 1.9 characters per line \u2014 the same shred gh#262 fixed at ten columns, three columns below the ceiling that was supposed to make it impossible. The same queue on the floors is 4.75 characters per line and scrolls, which is the trade SC 1.4.10 already sanctions above. `max(%, length)` is not an alternative to the switch. It is not merely ignored: in the fixed algorithm Chromium resolves `max(24%, 6rem)` on a 340px table to 113px \u2014 neither the 81.6px percentage nor the 96px floor \u2014 so it cannot express "this column, floored". Units are rem, not ch: `ch` tracks the "0" glyph (~half a CJK em), so a ch-denominated floor would silently halve for the JA copy these floors exist to protect. At the compact type tier (font-size-xs = 0.75rem, space-2 inline padding each side) the 5rem meta floor keeps a ~4rem text measure = 5 full-width glyphs per line \u2014 a JA header wraps to two readable lines, never a character column.'},{name:"--table-action-collection-secondary-width-floor",value:"5.5rem",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-meta-width-floor",value:"5rem",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-flex-width-floor",value:"5rem",description:"Floor for a column with NO `priority` (the free-text column, `auto` up to the budget). It cannot stay `auto` past the budget: once the marked columns over-constrain the table, the fixed algorithm hands an auto column exactly 0px (verified in Chromium) \u2014 the same shredding, moved to the free-text column. The actions floor is simply `--table-action-collection-actions-width-compact`, already an absolute measure."},{name:"--table-action-collection-font-size-compact",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-cell-space-x-compact",value:"var(--space-2)",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-cell-padding-y-compact",value:"var(--space-2)",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-row-height-compact",value:"var(--table-row-height-compact)",description:"Table component tokens: row height, cell padding."},{name:"--table-action-collection-min-inline-size-compact",value:"0",description:'Compact-tier LEGIBILITY FLOOR \u2014 the measure below which the preset stops fitting the table to its container and lets the scroll region it already owns take over. The percentage budget above is sized for ONE column per priority tier plus one free-text column. A queue that repeats a tier \u2014 two `secondary` columns, three `meta` columns, or an unmarked column beside them \u2014 asks for more than 100%, and under `table-layout: fixed` the surplus is taken out of the columns rather than out of the table: measured on a seven-column Japanese admin queue at 390, every column landed at 44\u201359px and CJK labels wrapped at ONE to TWO characters per line (dxs-platform/platform#680). That is a WCAG 2.2 SC 1.4.10 Reflow (AA) failure, and it is the failure mode this floor removes. Scrolling is the correct escape, not a concession: SC 1.4.10 exempts "parts of the content which require two-dimensional layout for usage or meaning", and its own note names data tables as the example. A table that scrolls horizontally inside its card conforms; a table whose cells are one character wide does not. Default `0` so nothing changes for any existing consumer: a queue that fits its priority budget keeps fitting. A consumer whose queue carries more columns than the budget sets this to the measure at which its narrowest column is still readable (roughly 5rem per column for Japanese at the compact type tier) and the table scrolls instead of crushing.'},{name:"--table-stacked-collection-card-padding-y",value:"var(--space-stack-sm)",description:"Table \xB7 stacked-record-collection preset (gh#293 restore \u2014 SCR-215) \u2014 the canonical WIDE, heterogeneous record collection. Below the collapse step every `<tr>` becomes a bordered key-value card; these tokens own the card's own geometry (unlike action-collection, there is no column-priority measure to retune \u2014 the whole row becomes one block)."},{name:"--table-stacked-collection-card-padding-x",value:"var(--space-inline-md)",description:"Table component tokens: row height, cell padding."},{name:"--table-stacked-collection-card-gap",value:"var(--space-stack-sm)",description:"Table component tokens: row height, cell padding."},{name:"--table-stacked-collection-cell-padding-y",value:"var(--space-stack-xs)",description:"Table component tokens: row height, cell padding."},{name:"--table-stacked-collection-cell-padding-x",value:"0",description:"Inline inset of a folded cell inside its card (gh#1102). 0: the card's own --table-stacked-collection-card-padding-x is the inset, so a value line gets the card's full content width instead of losing the table's cell padding on both sides."},{name:"--table-stacked-collection-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Table component tokens: row height, cell padding."},{name:"--table-select-column-width",value:"2.5rem",description:"DATA TABLE odds and ends that were still literal on the component (#319). The table's cell rhythm, widths and action-collection tiers were already tokenized; these are the pieces around them \u2014 the select column, sort glyphs, sticky header layer and skeleton shapes."},{name:"--table-sort-icon-size",value:"var(--icon-size-xs)",description:"Table component tokens: row height, cell padding."},{name:"--table-toolbar-icon-size",value:"var(--icon-size-md)",description:"Table component tokens: row height, cell padding."},{name:"--table-pagination-icon-size",value:"var(--icon-size-md)",description:"Table component tokens: row height, cell padding."},{name:"--table-pagination-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Table component tokens: row height, cell padding."},{name:"--table-skeleton-check-size",value:"1rem",description:"Skeleton placeholders mimic the real content they stand in for: a checkbox square and a text line at the row's cap height. Retune with --table-cell-padding-y to keep the loading state the same height as the loaded one."},{name:"--table-skeleton-line-block-size",value:"1rem",description:"The skeleton bar's BLOCK SIZE. `--table-skeleton-line-height` was a length on the line-height axis, whose scale is unitless ratios (gh#324) \u2014 a mis-named height, and the only raw value on that axis, which is what kept the axis ungated. Renamed rather than left, with the old name kept as a DEPRECATED ALIAS: it is a published token a consumer theme may already override, and styles/table-layout.css still reads the old name, so an override of either spelling keeps working. Prefer the new name; the alias may be removed in a future major."},{name:"--table-skeleton-line-height",value:"var(--table-skeleton-line-block-size)",description:"Table component tokens: row height, cell padding."},{name:"--table-skeleton-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--table-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"The table's own base type step (gh#319). Was a `text-sm` utility on the <table>; the theme remaps `--text-sm` to `--font-size-sm`, so this default is byte-identical."},{name:"--table-line-height",value:"calc(1.25 / 0.875)",description:"MANDATORY companion to --table-font-size \u2014 the gh#260 trap, again. `text-sm` also set line-height from Tailwind's `--text-sm--line-height`, and styles/base.css remaps `--text-sm` but NOT that companion. Without this the table would silently inherit ambient page leading the moment the font-size moved into CSS. Same unitless ratio Tailwind ships."},{name:"--table-row-border-width",value:"initial",description:'Horizontal row rule (chrome, #44) \u2014 the divider between body rows AND under the header row. Owned here rather than as TableRow\'s `border-b` utility so the "last row draws no rule" rule in `@layer components` can actually zero it; a utility would outrank it by layer. Colour is deliberately NOT set: it inherits the global `* { border-color: hsl(var(--border)) }` so a scoped [data-tenant]/.dark override of --border still reaches every row. default = var(--stroke-hairline), resolved at the call site (gh#906)'},{name:"--table-flush-divider-width",value:"var(--table-row-border-width, var(--stroke-hairline))",description:"Flush divider (chrome, #44/#45) \u2014 the ONE edge a full-bleed table keeps when it sits inside `<CardContent flush>`: the line between a plain CardHeader and the first row. The other three edges coincide with the card's own frame and are erased (gh#305); this one has nothing behind it, so without it the header band floats (gh#306). Scoped by construction to the case that needs it \u2014 a BANDED header, a CardBar or a headerless card already draw their own line there and never reach this token \u2014 so a service tunes only the plain-header divider: `0` for a borderless full-bleed table, heavier for a stronger band. Colour and style are NOT set here: only the width is restored, so the surface's own border declaration still owns them and a scoped [data-tenant]/.dark override of --border reaches it. Default = the same hairline the table's other rules draw."},{name:"--table-row-tone-rail-width",value:"initial",description:"Row TONE (`rowTone`) \u2014 the leading-edge rail plus the wash behind a row in a named state. The rail measure is `--card-accent-rail-width`'s own step so a toned row and a toned Card read as the same mark at the same weight; it is spelled out rather than referenced because a service that thins its card rails should not silently thin its table rails too. The wash is deliberately weak: it must stay under the selected-row fill (which is a stronger statement about the same row) and must not carry meaning on its own \u2014 that is what the rail and the row's own status cell are for. default = var(--stroke-2xl), resolved at the call site (gh#906)"},{name:"--table-row-tone-wash-alpha",value:"0.06",description:"Table component tokens: row height, cell padding."},{name:"--text-link-underline-offset",value:"0.18em",description:"Distance from the text baseline to the underline. In `em` on purpose: the rule has to stay proportional across the seven type steps, and a px value that reads right at `lg` crowds the descenders at `2xs`. GoDX v2.3 guideline: `.gx a { text-underline-offset: .18em }`"},{name:"--text-link-underline-width",value:"auto",description:"`auto` lets the face decide; a theme that wants a heavier rule names a length."},{name:"--text-link-decoration-line",value:"underline",description:'THE LINK IS UNDERLINED AT REST, and the default is a measurement, not a taste (gh#664). It was `none` with the rule added only on hover/focus, so a link inside a sentence differed from the words around it by hue alone \u2014 and that hue is 1.87:1 against body ink in light, 1.54:1 in dark. WCAG 1.4.1 lets colour carry a link on its own only at 3:1 (technique G183), so the old default failed it everywhere a link sat in running text. The consumer met it for real: "97 ng\u01B0\u1EDDi \u0111ang d\xF9ng" read as plain copy and nobody clicked it (godx-jp/id#1419). The v2.3 guideline agrees: `.gx a` never removes the UA underline, and its prose says "Ch\u1EEF link c\xF3 g\u1EA1ch ch\xE2n". `none` is still a legal value, because a link in a nav row or a card title carries its affordance some other way. It is NOT a style knob for running text: at the shipped colours it re-opens the 1.4.1 failure this default closes.'},{name:"--text-action-gap",value:"var(--space-1)",description:"Gap between the text and the operation cluster, and between the operations."},{name:"--text-action-color",value:"initial",description:"The operation reads as a link, because that is what it is \u2014 an affordance inside running text, not a control box. Same reasoning as `Text`'s own `link` prop. default = hsl(var(--primary)), resolved at the call site"},{name:"--text-action-color-hover",value:"initial",description:"default = the live primary hover, resolved at the call site \u2014 a `:root` binding would freeze on the root's primary and ignore a scoped re-theme (docs/TOKENS.md, the freeze rule; gh#678)"},{name:"--text-action-size",value:"1em",description:'The icon box tracks the run it sits in: `em`, so a copy button beside `size="2xs"` shrinks with it instead of towering over the text.'},{name:"--text-mark-background",value:"hsl(var(--warning))",description:"`<mark>` is a FILL plus the label measured against it \u2014 `--warning` / `--warning-foreground` are exactly that pair. NOT `--text-warning`, which is the AA-safe INK tier and would paint a dark yellow highlight with dark text on it."},{name:"--text-mark-foreground",value:"hsl(var(--warning-foreground))",description:"TEXT \u2014 knobs for the typographic primitive's link affordance. Size, weight and tone are NOT here: they are the foundation's own `--font-size-*`, `--font-weight-*` and the semantic foreground roles, read directly by `styles/text-layout.css`. A link adds two things those tiers do not describe \u2014 how far the rule sits from the baseline, and how heavy it is."},{name:"--thought-chain-gap",value:"var(--space-4)",description:"Gap between two steps, and between the glyph column and the body."},{name:"--thought-chain-node-gap",value:"var(--space-3)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-body-gap",value:"var(--space-1)",description:"Gap between the header, the body and the footer of ONE step."},{name:"--thought-chain-icon-size",value:"var(--band-height-sm)",description:"The glyph column. A square, so an ordinal, an icon and a status mark share one track and the connector below stays centred under all three. It reads the BAND height, not an icon step, so the circle matches the title band it sits beside; 24px and 36px are the nearest steps and both would break that alignment to buy nothing. scale-exempt: 28px ordinal medallion sized to the title band, not a glyph"},{name:"--thought-chain-icon-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-icon-radius",value:"var(--radius-pill)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-icon-background",value:"initial",description:"Role-mirror knobs (docs/TOKENS.md): `initial`, so each documented default resolves at the CALL SITE and a scoped `[data-tenant]` / `.dark` override still reaches it. Default ground = hsl(var(--muted)) \xB7 default ink = hsl(var(--muted-foreground))"},{name:"--thought-chain-icon-color",value:"initial",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-icon-success-color",value:"initial",description:"Status tints. Same three roles the rest of the library uses for the same three meanings."},{name:"--thought-chain-icon-error-color",value:"initial",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-line-width",value:"initial",description:"The connector. Its inline position tracks HALF the glyph column so it stays centred whatever the column's size becomes \u2014 never a literal offset. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--thought-chain-line-color",value:"initial",description:"default = hsl(var(--border))"},{name:"--thought-chain-chevron-size",value:"var(--icon-size-sm)",description:"The collapsed body and its chevron."},{name:"--thought-chain-content-space-block",value:"var(--space-2)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-item-gap",value:"var(--space-2)",description:"A STANDALONE step (ThoughtChainItem) \u2014 the chip an assistant drops inline."},{name:"--thought-chain-item-padding-block",value:"var(--space-2)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-item-padding-inline",value:"var(--space-3)",description:"ThoughtChain component tokens \u2014 the assistant's reasoning, step by step (Ant Design X `ThoughtChain`). Ant retunes this through `styles={{ root, item, itemHeader, itemIcon, itemContent, itemFooter }}`. This file is the answer instead (rules #44/#45). The chain deliberately reads the SAME steps as `Timeline`'s rail, because the two are the same vertical object seen twice \u2014 one for events that happened, one for a run in progress \u2014 and two rails on one screen that disagree by two pixels is the complaint gh#559 opens with."},{name:"--thought-chain-item-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--thought-chain-item-solid-background",value:"initial",description:"default = hsl(var(--muted))"},{name:"--thought-chain-item-outlined-border",value:"initial",description:"default = hairline solid hsl(var(--border))"},{name:"--toggle-count-min-width",value:"var(--space-4)",description:"\u2500\u2500 Counter pill \xB7 geometry. One knob per component (rule #45, and the repo's existing shape: --button-count-*, --tag-input-chip-font-size, --toggle-sm-font-size are all independent knobs off the same primitive scale). The VALUES are byte-identical to Button's counter pill and read the same primitive tokens, so the two pills render the same size and a Toggle count set beside a Button count is indistinguishable \u2014 asserted by src/styles/__tests__/toggle-count-token-parity.test.ts so it cannot drift silently. (They are concrete here rather than `initial` + a call-site `var(--toggle-\u2026, var(--button-\u2026))` fallback because check:typography requires a bare `var(--token)` for every font-size, and a split shape across the five geometry knobs would be worse than a consistent one.)"},{name:"--toggle-count-space-inline",value:"var(--space-1)",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-count-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-count-radius",value:"var(--radius-pill)",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-count-gap",value:"0",description:"Quiet default (#44) \u2014 the toggle's own flex gap already separates label from pill; this knob ADDS to it for a service whose design grid wants the counter pushed further out."},{name:"--toggle-count-background",value:"initial",description:"\u2500\u2500 Counter pill \xB7 unpressed colours. Defaults = hsl(var(--muted)) fill (quiet: 1.09:1 against the chip's own surface, so at rest the count reads as text, #44) and hsl(var(--foreground)) text (14.25:1 on that fill). Opaque on purpose \u2014 a translucent fill would take its contrast from whatever surface the chip currently has, and lose ~0.7 on hover."},{name:"--toggle-count-color",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-soft-background",value:"initial",description:'\u2500\u2500 `soft` \xB7 the REST surface (gh#734). Defaults = hsl(var(--secondary)) fill with hsl(var(--secondary-foreground)) text \u2014 the pair `Badge variant="secondary"` and `.ui-button--secondary` already paint, so a chip, a badge and a button on one row are one family and a service that re-themes `--secondary` moves all three at once. The hover step is the OPAQUE `--secondary-hover`, not a translucent tint, because a chip row sits on the page and inside a Card and a translucent hover would read differently on each. Role-mirror knobs \u2014 `initial` here with the role at the call site (docs/TOKENS.md).'},{name:"--toggle-soft-color",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-soft-hover-background",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-soft-count-background",value:"initial",description:"The `soft` chip's own counter pill. Defaults = hsl(var(--background)) fill, hsl(var(--foreground)) text. It cannot inherit the generic `--muted` fill above: `--muted` and `--secondary` are the same value in the shipped theme, so that pill would measure 1.00:1 on a soft chip and vanish."},{name:"--toggle-soft-count-color",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-pressed-count-background",value:"initial",description:"\u2500\u2500 Counter pill \xB7 PRESSED colours. Defaults = hsl(var(--primary-foreground)) fill, hsl(var(--primary)) text \u2014 the pressed chip's OWN pair, swapped. Not `--primary` on `--primary`: the pressed chip is already filled with --primary, so a --primary pill would be invisible on it. The swap also flips the pill from near-invisible to solid, which is one of the encodings that keeps the pressed state off colour alone (WCAG 1.4.1)."},{name:"--toggle-pressed-count-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--toggle-pressed-count-color",value:"initial",description:"TOGGLE \u2014 counter-pill + pressed-state knobs (gh#312). Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` / `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip \"Unread 12\", a reaction chip) needs both, so Toggle grew the same vocabulary \u2014 and these knobs exist so it grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45). SHARE vs SPLIT \u2014 the rule this file follows, and why each half falls where it does: \u2022 GEOMETRY is genuinely the same pill \u2014 min-width, inline padding, type step, corner. Toggle keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same primitive scale token, and a test asserts the two stay equal \u2014 so a Toggle count set beside a Button count is indistinguishable and cannot drift unnoticed, while a service can still move one without the other. \u2022 COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant surface and tints itself with a translucent foreground (`bg-primary-foreground/15`, `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles, `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in light (4.39:1 even at 0.08 \u2014 the ceiling is the chip label's own 5.04:1, and any tint can only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship a known #299-class failure. So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's variant and hover surface, and inverts them with the state: unpressed --foreground on --muted \u2192 14.25:1 light \xB7 12.40:1 dark pressed --primary on --primary-foreground \u2192 5.04:1 light \xB7 7.07:1 dark The pressed pair is the chip label's own pair, swapped \u2014 the pill is exactly as legible as the label it sits next to, never worse, under any theme that keeps that pair legible. Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call site (docs/TOKENS.md \xB7 \"Role-mirror knobs MUST be `initial`\"). A `:root` binding to `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override of the role would never reach it."},{name:"--toggle-pressed-border-color",value:"initial",description:"\u2500\u2500 Pressed chrome. Default = hsl(var(--primary)), i.e. the pressed fill itself, so out of the box this border is quiet (#44) and the pressed state is carried by the fill inversion + the pill inversion + the forced-colors rule below. A service whose pressed fill is a PALE tint (where those inversions get weak) opts into a visible outline by overriding this."},{name:"--toggle-pressed-border-color-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--toggle-count-forced-outline-width",value:"initial",description:"Under forced-colors every fill is flattened to a system colour, so neither inversion encodes anything any more. This outline is the state's structural fallback there \u2014 drawn on the PRESSED pill only, and as `outline` (not `border`) so it costs no layout. default = var(--stroke-hairline), resolved at the call site (gh#906)"},{name:"--tree-node-height",value:"initial",description:"Row box height. MIRRORS THE `--control-height` TIER \u2014 the row is a control-sized hit target, and the tier is density-aware, so the height is never a literal and never an ad-hoc `calc(var(--control-height) \xB1 \u2026)` (that re-derives a tier and drifts out of step with the controls beside it). `size` picks a NAMED step (`--control-height-{xs,sm,lg}`) at the call site; the tier is re-scoped by the auth shells, hence `initial` here. Documented default: --tree-node-height = var(--control-height)."},{name:"--tree-indent-width",value:"var(--space-5)",description:'Indent per level. Drives `padding-inline-start` on the row \u2014 a LOGICAL property, so the outline flips under `dir="rtl"` with no second rule.'},{name:"--tree-node-padding-inline",value:"var(--space-2)",description:"Inline padding inside a row, the gap between switcher / checkbox / icon / label, and the row's corner. Pure geometry \u2014 no role to freeze, so these bind directly."},{name:"--tree-node-gap",value:"var(--space-2)",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-node-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))"},{name:"--tree-node-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-switcher-size",value:"1.25rem",description:'The disclosure triangle (NameThatUI: "disclosure triangle"; an indented tree that expands is an "Outline View"). Its box is what makes the switcher a real 24px-class target inside the row, so it is a knob, not a hardcoded icon size.'},{name:"--tree-switcher-color",value:"initial",description:"Documented default: --tree-switcher-color = hsl(var(--muted-foreground))."},{name:"--tree-icon-size",value:"var(--icon-size-md)",description:'Node glyph (`showIcon`, and the folder/file pair of `variant="directory"`).'},{name:"--tree-line-color",value:"initial",description:"Documented default: --tree-line-color = hsl(var(--border))."},{name:"--tree-divider-color",value:"initial",description:"Documented default: --tree-divider-color = hsl(var(--border))."},{name:"--tree-node-hover-background",value:"initial",description:"Row states. Both mirror roles, so both are `initial` with the role read at the call site. Documented defaults: --tree-node-hover-background = hsl(var(--accent)); --tree-node-selected-background = hsl(var(--accent)); --tree-node-selected-foreground = hsl(var(--accent-foreground))."},{name:"--tree-node-hover-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tree-node-selected-background",value:"initial",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-node-selected-background-alpha",value:"initial",description:"default = 100% at the call site"},{name:"--tree-node-selected-foreground",value:"initial",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-node-filter-foreground",value:"initial",description:"Label of a node `filterTreeNode` matched (antd `.filter-node` title: primary colour, strong weight). A role mirror, so `initial` with the role at the call site. Documented default: --tree-node-filter-foreground = hsl(var(--text-brand, var(--primary)))."},{name:"--tree-drop-indicator-color",value:"initial",description:"Drop indicator of a `draggable` tree (gh#1093): the gap line / inside frame. A role mirror, so `initial` with the role at the call site. Documented defaults: --tree-drop-indicator-color = hsl(var(--primary)); --tree-drop-indicator-width = var(--stroke-md)."},{name:"--tree-drop-indicator-width",value:"initial",description:'TREE \u2014 the standalone, on-page WAI-ARIA "Tree View" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` \u2014 CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md \xB7 "Role-mirror knobs MUST be `initial`".'},{name:"--tree-loading-bar-inline-size",value:"40%",description:'Width of the indeterminate bar shown while `loadData` resolves a branch. A fraction, not a length: it has to read as "part of a row" at every row width and every density.'},{name:"--upload-dropzone-space-inset",value:"var(--space-10)",description:"DROPZONE \u2014 the large drag target. Its inset is deliberately generous; a dense service dials it back with one override instead of forking the variant."},{name:"--upload-dropzone-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--upload-dropzone-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--upload-dropzone-icon-size",value:"var(--icon-size-3xl)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-dropzone-hint-space-block-start",value:"var(--space-3)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-dropzone-hint-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-dropzone-meta-space-block-start",value:"var(--space-1)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-dropzone-meta-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-size",value:"6rem",description:'TILE \u2014 the 96px square shared by picture-card thumbnails and the "add image" button. One knob resizes the whole gallery; picture-card grids are the most common thing a service re-grids to match its own column rhythm.'},{name:"--upload-tile-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--upload-tile-space-gap",value:"var(--space-3)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-icon-size",value:"var(--icon-size-xl)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-label-space-block-start",value:"var(--space-1)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-label-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-tile-overlay-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-overlay-background",value:"initial",description:"Busy scrim over a tile/frame \u2014 role-mirror knob, `initial` so --background re-resolves at the CALL SITE under a scoped [data-tenant]/.dark theme. Default = hsl(var(--background) / 0.7)."},{name:"--upload-overlay-alpha",value:"70%",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-remove-space-inset",value:"var(--space-1)",description:"REMOVE affordance \u2014 the \u2715 / trash chip pinned to a tile or avatar."},{name:"--upload-remove-offset",value:"var(--space-1)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-remove-icon-size",value:"var(--icon-size-sm)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-max-width",value:"20rem",description:"PICTURE \u2014 the single wide preview variant."},{name:"--upload-picture-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--upload-picture-preview-max-height",value:"12rem",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-empty-height",value:"8rem",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-icon-size",value:"var(--icon-size-2xl)",description:"The empty-state mark. It was `controlIconClass` \u2014 a CONTROL height (32px) leaking into a media placeholder, and 32 is not a step of the icon scale at all. The 128px-tall empty box sits between the 96px tile (24) and the 185px dropzone (40), so its mark does too."},{name:"--upload-picture-empty-label-space-block-start",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-empty-label-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-overlay-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-badge-radius",value:"initial",description:'"Pending replace" chip. The radius previously came from a bare `rounded`, which resolves to a flat .25rem and so ignored the radius scale entirely \u2014 the exact shape of a rule #44 miss. It now follows the tile radius like every other chip in the component. gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))'},{name:"--upload-picture-badge-offset",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-badge-space-inline",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-badge-space-block",value:"0.125rem",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-picture-badge-font-size",value:"var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-avatar-size",value:"6rem",description:"AVATAR \u2014 the round single-image variant."},{name:"--upload-avatar-icon-size",value:"var(--icon-size-xl)",description:"The camera mark inside the empty avatar. Same step as --upload-tile-icon-size on purpose: the avatar and the picture-card tile are the SAME 96px box, and they were drawing 32 and 24."},{name:"--upload-avatar-border-width",value:"initial",description:"default = var(--stroke-md), resolved at the call site (gh#906)"},{name:"--upload-avatar-change-space-block",value:"var(--space-1)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-avatar-change-background",value:"rgb(0 0 0 / 0.7)",description:'The "change" strip sits ON the photo, so its scrim is intentionally a fixed dark wash rather than a surface role \u2014 it must stay legible over an arbitrary user image in either theme.'},{name:"--upload-avatar-change-foreground",value:"#fff",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-avatar-pending-delete-alpha",value:"0.4",description:"Alpha of an image the user has marked for deletion but not yet committed."},{name:"--upload-draft-space-inline",value:"var(--space-3)",description:"DRAFT BAR \u2014 the undo strip shown after a pending remove/replace."},{name:"--upload-draft-space-block",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-draft-space-gap",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-draft-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--upload-draft-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-draft-icon-size",value:"var(--icon-size-sm)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-row-space-inline",value:"var(--space-3)",description:"FILE ROW \u2014 the list rendered under the dropzone/button variants."},{name:"--upload-row-space-block",value:"var(--space-2)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-row-space-gap",value:"var(--space-3)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-row-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))"},{name:"--upload-row-font-size",value:"var(--font-size-sm, var(--font-size-base))",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-row-icon-size",value:"var(--icon-size-md)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-crop-dialog-max-width",value:"24rem",description:"CROP DIALOG \u2014 the 1:1 avatar cropper (`UploadCropDialog`). The 66-literal upload pass above never reached this file, so the whole cropper was still baked on the component: the dialog was pinned to `max-w-sm`, the round preview to `size-48`, the zoom row to `px-2`. An avatar is one of the most service-specific sizes there is (a 96px tile service wants a smaller crop stage than a 200px one), and the crop stage must stay in proportion with --upload-avatar-size \u2014 which is exactly the pair rule #45 exists to keep tunable together. The dialog width intentionally stays a knob of its own rather than reading --dialog-width-default: the cropper is deliberately NARROWER than a normal dialog so the round stage reads as the subject, not as a small element in a wide box."},{name:"--upload-crop-preview-size",value:"12rem",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-crop-preview-radius",value:"var(--radius-pill)",description:"Upload primitive tokens \u2014 dropzone, picture tile, avatar, draft bar, file row. Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library (#319). It renders five variants (dropzone \xB7 button \xB7 picture \xB7 picture-card \xB7 avatar), and EVERY one of them baked its box straight onto the component: a service could not resize the avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid without forking. That is precisely the gap cardinal rule #45 exists to close. Radius defaults mirror the utilities they replace, verified against the built CSS: rounded-lg = var(--radius) \u2192 --radius-lg rounded-md = calc(var(--radius) / var(--radius-ratio)) \u2192 --radius-md rounded-full \u2192 --radius-pill"},{name:"--upload-crop-zoom-space-inline",value:"var(--space-2)",description:"Zoom row inset \u2014 the slider is inset from the dialog edge so its thumb's focus ring is never flush against the dialog padding."},{name:"--welcome-gap",value:"var(--space-4)",description:"Gap between the glyph column and the text column."},{name:"--welcome-content-gap",value:"var(--space-1)",description:"Gap between the title row and the description."},{name:"--welcome-title-gap",value:"var(--space-3)",description:"Gap between the title and the `extra` slot on the title row."},{name:"--welcome-padding-block",value:"var(--space-4)",description:"Inset of the `filled` form. `borderless` drops it to zero."},{name:"--welcome-padding-inline",value:"var(--space-4)",description:"Welcome component tokens \u2014 the greeting block at the head of an empty conversation (Ant Design X `Welcome`). Ant X retunes this block through `styles={{ root, icon, title, description, extra }}`. This file is the answer instead (rules #44/#45): a service sets the knob once in its theme.css and every Welcome on every surface follows."},{name:"--welcome-radius",value:"initial",description:"gh#888 \u2014 \u03C6 tier freezes at :root; default = var(--radius)"},{name:"--welcome-icon-size",value:"var(--icon-size-xl)",description:"The glyph column. A square, so an image icon and an SVG icon occupy the same track."},{name:"--welcome-filled-background",value:"initial",description:"`filled` chrome. Role-mirror knobs (docs/TOKENS.md): `initial` so the documented default resolves at the CALL SITE and a scoped `[data-tenant]` / `.dark` override still reaches it. Default ground = hsl(var(--muted))"},{name:"--welcome-filled-border",value:"initial",description:"`outlined` is not an Ant X variant; the hairline below belongs to `filled` only."}];var u={issue:"https://github.com/godx-jp/godxjp-ui/issues/163",standard:"docs/FRAME-COVERAGE-STANDARD.md",ledger:"preview/frame-coverage.ledger.json",recordedAt:"2026-09-12",warning:"UNTESTED means no executed case demonstrates this dimension. It is NOT a pass. Do not infer support from a happy-path example, a similarly-named frame, or a rendered screenshot.",verdicts:{covered:"An executed case proves this dimension.",untested:"No executed case. NOT a pass \u2014 report it as UNTESTED to the user.","not-applicable":"The dimension cannot exist for this export; the ledger carries the written reason."},requiredViewports:[320,375,390,768,1024,1280,1440,1920],containerWidths:[240,320,480,640,960],totals:{exports:304,dimensionCells:4256,covered:94,untested:2335,notApplicable:1827,exportsWithoutFrame:0},dimensions:[{id:"variants",title:"Variants",axis:"visual"},{id:"tones",title:"Tones",axis:"visual"},{id:"sizes",title:"Sizes",axis:"visual"},{id:"shapes",title:"Shapes",axis:"visual"},{id:"density",title:"Spacing / density",axis:"visual"},{id:"ownership",title:"Controlled / uncontrolled / reset",axis:"ownership"},{id:"states",title:"Disabled / read-only / loading / empty / error / success",axis:"state"},{id:"async",title:"Async: loading / reject / retry / cancel / offline",axis:"async"},{id:"responsive",title:"Responsive viewport matrix",axis:"responsive"},{id:"rtl",title:"RTL / direction",axis:"international"},{id:"contentStress",title:"Long / localized content stress",axis:"contentStress"},{id:"keyboard",title:"Keyboard / focus order / focus return",axis:"accessibility"},{id:"accessibleName",title:"Accessible name / description / error association",axis:"accessibility"},{id:"reducedMotion",title:"Preferences: reduced motion / forced colors / 200% zoom / coarse touch",axis:"preferences"}],knownGaps:[{id:"button-contract-gaps",targets:["Button"],dimensions:["states","contentStress","rtl","keyboard","reducedMotion"],cases:["implicit form `type` inside a form","loading combined with asChild","count / overflowCount / showZero overflow","long Japanese and Vietnamese labels","RTL","coarse touch target"]},{id:"card-contract-gaps",targets:["Card"],dimensions:["variants","density","rtl","accessibleName"],cases:["`variant` \xD7 `accent` \xD7 `size` matrix",'`density="tight"` spacing mode',"nested heading levels","RTL accent rail"]},{id:"card-subcomponent-contract-gaps",targets:["CardBar","CardContent","CardFooter","CardHeader"],dimensions:["rtl","accessibleName","contentStress"],cases:["CardBar `extra` slot","CardContent `tight` / `flush` / `solo`","CardFooter `flush` / `separated`","CardHeader `banded`","RTL"]},{id:"empty-state-contract-gaps",targets:["EmptyState"],dimensions:["variants","contentStress","accessibleName"],cases:["`section` variant","`compact` variant","without icon / description / action","heading level (`titleAs` / `titleLevel`) and live-region semantics"]},{id:"progress-contract-gaps",targets:["Progress"],dimensions:["tones","contentStress"],cases:["destructive tone","`over={true}` (value beyond 100%)"]},{id:"carousel-contract-gaps",targets:["Carousel"],dimensions:["ownership","contentStress","keyboard","reducedMotion","rtl"],cases:["single slide","plugins / setApi","autoplay pause","arrow-key traversal alongside tabs","touch / swipe","RTL"]},{id:"data-table-contract-gaps",targets:["DataTable"],dimensions:["states","async","keyboard","accessibleName","density"],cases:["error / prerequisite / background refresh","server and manual modes (manualPagination / manualSorting / manualFiltering)","zero-page and single-page pagination","accessible table and action-column labels","invalid row ids (getRowId)","keyboard behaviour","virtualization"]},{id:"charts-contract-gaps",targets:["LineChart","BarChart","AreaChart","PieChart"],dimensions:["async","reducedMotion","keyboard","contentStress","responsive","rtl"],cases:["loading / error","reduced motion","keyboard datum navigation","invalid / null / NaN data","mobile axis collision","RTL"]},{id:"locale-stress-gaps",targets:["Timeline","PasswordStrength"],dimensions:["contentStress","accessibleName"],cases:["long localized Japanese / Vietnamese content","hard-coded screen-reader strings that never reach `t()`"]}]},F=[{name:"Accordion",group:"data-display",frame:"docs/data-display/accordion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AccordionContent",group:"data-display",frame:"docs/data-display/accordion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AccordionItem",group:"data-display",frame:"docs/data-display/accordion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AccordionTrigger",group:"data-display",frame:"docs/data-display/accordion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AccountChip",group:"layout",frame:"docs/layout/account-chip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Actions",group:"general",frame:"docs/general/actions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","variants"],notApplicable:["density","ownership","shapes","sizes","states","tones"]},{name:"ActionsCopy",group:"general",frame:"docs/general/actions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ActionsFeedback",group:"general",frame:"docs/general/actions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"ActionsItem",group:"general",frame:"docs/general/actions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Activity",group:"general",frame:"docs/general/activity.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes","tones","variants"],notApplicable:["density","ownership","shapes","states"]},{name:"Affix",group:"layout",frame:"docs/layout/affix.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Alert",group:"feedback",frame:"docs/feedback/alert.tsx",covered:["tones","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states"]},{name:"AlertActions",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertContent",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDescription",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialog",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones"]},{name:"AlertDialogAction",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogCancel",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogContent",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogDescription",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogFooter",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogHeader",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"AlertDialogOverlay",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogPortal",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogRoot",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"AlertDialogTitle",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertDialogTrigger",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertMutationFeedback",group:"query",frame:"docs/query/mutation-feedback.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"AlertMutationFeedbackProps",group:"query",frame:"docs/query/mutation-feedback.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AlertQueryError",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"AlertTitle",group:"feedback",frame:"docs/feedback/alert.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Anchor",group:"navigation",frame:"docs/navigation/anchor.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"AppLauncher",group:"layout",frame:"docs/layout/app-launcher.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AppSettingPicker",group:"navigation",frame:"docs/navigation/app-setting-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AppSettingToggle",group:"navigation",frame:"docs/navigation/app-setting-toggle.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"AppShell",group:"layout",frame:"docs/layout/app-shell.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AreaChart",group:"charts",frame:"docs/data-display/charts.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"AspectRatio",group:"layout",frame:"docs/layout/aspect-ratio.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Attachments",group:"data-entry",frame:"docs/data-entry/attachments.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"AuthAccountSummary",group:"layout",frame:"docs/layout/auth-account-summary.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"AuthDivider",group:"layout",frame:"docs/layout/auth-divider.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AuthExpiryProvider",group:"query",frame:"docs/feedback/auth-expiry.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AuthFooter",group:"layout",frame:"docs/layout/auth-footer.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AuthIdentity",group:"layout",frame:"docs/layout/auth-identity.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AuthShell",group:"layout",frame:"docs/layout/auth-shell.tsx",covered:["density","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones"]},{name:"AuthStack",group:"layout",frame:"docs/layout/auth-stack.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Avatar",group:"data-display",frame:"docs/data-display/avatar.tsx",covered:["shapes","sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","states","tones","variants"]},{name:"AvatarFallback",group:"data-display",frame:"docs/data-display/avatar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"AvatarImage",group:"data-display",frame:"docs/data-display/avatar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Badge",group:"data-display",frame:"docs/data-display/badge.tsx",covered:["shapes","tones","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","sizes","states"]},{name:"Banner",group:"feedback",frame:"docs/feedback/banner.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"BarChart",group:"charts",frame:"docs/data-display/charts.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"BranchScopePicker",group:"data-entry",frame:"docs/data-entry/branch-scope-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Breadcrumb",group:"layout",frame:"docs/navigation/breadcrumb.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Button",group:"general",frame:"docs/general/button/index.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","tones"]},{name:"ButtonRefetch",group:"query",frame:"docs/query/button-refetch.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","tones"]},{name:"Calendar",group:"data-entry",frame:"docs/data-entry/calendar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Callout",group:"feedback",frame:"docs/feedback/callout.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","tones"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"Card",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:["density","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones"]},{name:"CardAction",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardBar",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardContent",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardCover",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardDescription",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardFooter",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardHeader",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CardTitle",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Carousel",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"CarouselContent",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CarouselDots",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CarouselItem",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CarouselNext",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CarouselPrevious",group:"data-display",frame:"docs/data-display/carousel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Cascader",group:"data-entry",frame:"docs/data-entry/cascader.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"CenteredShell",group:"layout",frame:"docs/layout/centered-shell.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ChatBubble",group:"data-display",frame:"docs/data-display/chat-bubble.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes","states","tones","variants"],notApplicable:["density","ownership","shapes"]},{name:"ChatBubbleList",group:"data-display",frame:"docs/data-display/chat-bubble.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ChatComposer",group:"data-entry",frame:"docs/data-entry/chat-composer.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states"],notApplicable:["density","shapes","tones","variants"]},{name:"ChatSuggestion",group:"data-entry",frame:"docs/data-entry/chat-suggestion.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"Checkbox",group:"data-entry",frame:"docs/data-entry/checkbox.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CheckboxGroup",group:"data-entry",frame:"docs/data-entry/checkbox.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CodeBlock",group:"data-display",frame:"docs/data-display/code-block.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Collapsible",group:"data-display",frame:"docs/data-display/collapsible.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CollapsibleContent",group:"data-display",frame:"docs/data-display/collapsible.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CollapsibleTrigger",group:"data-display",frame:"docs/data-display/collapsible.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ColorPicker",group:"data-entry",frame:"docs/data-entry/color-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Command",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"CommandEmpty",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CommandGroup",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"CommandInput",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"CommandItem",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CommandList",group:"data-entry",frame:"docs/data-entry/command.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CommandPalette",group:"data-entry",frame:"docs/data-entry/command-palette.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"CompactBarTrend",group:"charts",frame:"docs/charts/compact-bar-trend.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Conversations",group:"navigation",frame:"docs/navigation/conversations.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"CredentialReveal",group:"data-display",frame:"docs/data-display/credential-reveal.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","variants"]},{name:"DataState",group:"query",frame:"docs/query/data-state.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"DataTable",group:"data-display",frame:"docs/data-display/data-table/index.tsx",covered:["density"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["shapes","sizes","tones","variants"]},{name:"DatePicker",group:"data-entry",frame:"docs/data-entry/date-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"DayButton",group:"data-entry",frame:"docs/data-entry/calendar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Descriptions",group:"data-display",frame:"docs/data-display/descriptions.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Dialog",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones"]},{name:"DialogAction",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogBody",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogCancel",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogClose",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogContent",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones"]},{name:"DialogDescription",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogFooter",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogHeader",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"DialogOverlay",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogPortal",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogTitle",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DialogTrigger",group:"feedback",frame:"docs/feedback/dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DraggablePanel",group:"layout",frame:"docs/layout/draggable-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"DropdownMenu",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"DropdownMenuCheckboxItem",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"DropdownMenuContent",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuGroup",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuItem",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones"]},{name:"DropdownMenuLabel",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuPortal",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuRadioGroup",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuRadioItem",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"DropdownMenuSeparator",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuShortcut",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuSub",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuSubContent",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"DropdownMenuSubTrigger",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"DropdownMenuTrigger",group:"navigation",frame:"docs/navigation/dropdown-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"EmptyState",group:"data-display",frame:"docs/data-display/empty-state.tsx",covered:["tones","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states"]},{name:"ErrorSurface",group:"layout",frame:"docs/layout/error-surface/index.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"FeatureList",group:"data-display",frame:"docs/data-display/feature-list.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Field",group:"data-entry",frame:"docs/data-entry/checkbox.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"FilterBar",group:"navigation",frame:"docs/navigation/toolbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"FilterBarGroup",group:"navigation",frame:"docs/navigation/toolbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Flex",group:"layout",frame:"docs/layout/flex.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"FloatButton",group:"general",frame:"docs/general/float-button.tsx",covered:["shapes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","sizes","tones","variants"]},{name:"Form",group:"data-entry",frame:"docs/data-entry/form.tsx",covered:["density"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["ownership","shapes","sizes","tones","variants"]},{name:"FormErrors",group:"data-entry",frame:"docs/data-entry/form.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"FormErrorsProvider",group:"data-entry",frame:"docs/data-entry/form.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"FormField",group:"data-entry",frame:"docs/data-entry/form-field/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Heading",group:"general",frame:"docs/general/typography.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","variants"]},{name:"HoverCard",group:"data-display",frame:"docs/data-display/hover-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"HoverCardContent",group:"data-display",frame:"docs/data-display/hover-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"HoverCardTrigger",group:"data-display",frame:"docs/data-display/hover-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Icon",group:"general",frame:"docs/general/icon.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes","tones"],notApplicable:["density","ownership","shapes","states","variants"]},{name:"Image",group:"data-display",frame:"docs/data-display/image.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"ImagePreviewGroup",group:"data-display",frame:"docs/data-display/image.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"InfiniteQueryState",group:"query",frame:"docs/query/infinite-query-state.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Input",group:"data-entry",frame:"docs/data-entry/input.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"InputOTP",group:"data-entry",frame:"docs/data-entry/input-otp.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","variants"],notApplicable:["density","shapes","states","tones"]},{name:"InputOTPGroup",group:"data-entry",frame:"docs/data-entry/input-otp.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"InputOTPSeparator",group:"data-entry",frame:"docs/data-entry/input-otp.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"InputOTPSlot",group:"data-entry",frame:"docs/data-entry/input-otp.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Label",group:"data-entry",frame:"docs/data-entry/label.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"LegalDocumentShell",group:"layout",frame:"docs/layout/legal-document-shell/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Legend",group:"data-display",frame:"docs/data-display/legend.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"LineChart",group:"charts",frame:"docs/data-display/charts.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Link",group:"general",frame:"docs/general/typography.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","tones"],notApplicable:["density","ownership","shapes","variants"]},{name:"ListRow",group:"data-display",frame:"docs/data-display/list-row.tsx",covered:["density"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones","variants"]},{name:"Logo",group:"general",frame:"docs/general/logo.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","variants"]},{name:"Marquee",group:"data-display",frame:"docs/data-display/marquee.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Masonry",group:"layout",frame:"docs/layout/masonry.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"MasterDetail",group:"layout",frame:"docs/layout/master-detail.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"MegaMenu",group:"navigation",frame:"docs/navigation/mega-menu.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","shapes","states","tones","variants"]},{name:"MobileShell",group:"layout",frame:"docs/layout/mobile-shell.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"NavList",group:"layout",frame:"docs/layout/nav-list.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"NumberInput",group:"data-entry",frame:"docs/data-entry/number-input.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"OrgChart",group:"data-display",frame:"docs/data-display/org-chart.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"OrgSwitcher",group:"layout",frame:"docs/layout/org-switcher.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"PageContainer",group:"layout",frame:"docs/layout/page-container.tsx",covered:["density","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones"]},{name:"Pagination",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states"],notApplicable:["density","shapes","tones","variants"]},{name:"PaginationContent",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PaginationEllipsis",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PaginationItem",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PaginationLink",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"PaginationNext",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"PaginationPrevious",group:"navigation",frame:"docs/navigation/pagination.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"Paragraph",group:"general",frame:"docs/general/typography.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","tones"],notApplicable:["density","ownership","shapes","variants"]},{name:"PasswordInput",group:"data-entry",frame:"docs/data-entry/password-input.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"PasswordStrength",group:"data-entry",frame:"docs/data-entry/password-strength.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"PermissionMatrix",group:"data-display",frame:"docs/data-display/permission-matrix.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"PieChart",group:"charts",frame:"docs/data-display/charts.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Popover",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"PopoverAnchor",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverContent",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverDescription",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverHeader",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverTitle",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PopoverTrigger",group:"data-display",frame:"docs/data-display/popover.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"PrefetchLink",group:"react-router",frame:"docs/react-router/prefetch-link.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Progress",group:"data-display",frame:"docs/data-display/progress.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","shapes"],notApplicable:["density","states","variants"]},{name:"Prose",group:"data-display",frame:"docs/data-display/prose.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"QrCode",group:"data-display",frame:"docs/data-display/qr-code.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","states","tones","variants"]},{name:"Radio",group:"data-entry",frame:"docs/data-entry/radio-group.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RadioGroup",group:"data-entry",frame:"docs/data-entry/radio-group.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RadioGroupRoot",group:"data-entry",frame:"docs/data-entry/radio-group.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RadioItem",group:"data-entry",frame:"docs/data-entry/radio-group.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RangeTimeline",group:"data-display",frame:"docs/data-display/timeline.tsx",covered:[],untested:["accessibleName","async","contentStress","density","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones","variants"]},{name:"Rating",group:"data-entry",frame:"docs/data-entry/rating.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"RecordPicker",group:"data-entry",frame:"docs/data-entry/record-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","shapes","sizes","states"],notApplicable:["density","tones","variants"]},{name:"ResizableHandle",group:"layout",frame:"docs/layout/resizable-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ResizablePanel",group:"layout",frame:"docs/layout/resizable-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ResizablePanelGroup",group:"layout",frame:"docs/layout/resizable-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ResponsiveGrid",group:"layout",frame:"docs/layout/responsive-grid.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Reveal",group:"general",frame:"docs/general/reveal.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ScrollArea",group:"data-display",frame:"docs/data-display/scroll-area.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ScrollBar",group:"data-display",frame:"docs/data-display/scroll-area.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SearchInput",group:"data-entry",frame:"docs/data-entry/search-input.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones"]},{name:"Segmented",group:"data-entry",frame:"docs/data-entry/segmented.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones","variants"]},{name:"Select",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"SelectContent",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectGroup",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectItem",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"SelectLabel",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectScrollDownButton",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectScrollUpButton",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectSeparator",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SelectTrigger",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","variants"],notApplicable:["density","ownership","shapes","tones"]},{name:"SelectValue",group:"data-entry",frame:"docs/data-entry/select.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Separator",group:"layout",frame:"docs/layout/separator.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","tones"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"ServiceCatalogCta",group:"data-display",frame:"docs/data-display/service-launcher-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ServiceLauncherCard",group:"data-display",frame:"docs/data-display/service-launcher-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ServiceLauncherCardSkeleton",group:"data-display",frame:"docs/data-display/service-launcher-card.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ServiceRolePanel",group:"layout",frame:"docs/layout/service-role-panel.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Sheet",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"SheetBody",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetClose",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetContent",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetDescription",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetFooter",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetHeader",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:["tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"SheetOverlay",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetPortal",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetTitle",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SheetTrigger",group:"feedback",frame:"docs/feedback/sheet.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Sidebar",group:"layout",frame:"docs/layout/sidebar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SidebarHeader",group:"layout",frame:"docs/layout/sidebar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SidebarItem",group:"layout",frame:"docs/layout/sidebar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"SidebarSection",group:"layout",frame:"docs/layout/sidebar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Skeleton",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"SkeletonArticle",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"SkeletonAvatar",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:["shapes","sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","states","tones","variants"]},{name:"SkeletonButton",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:["shapes","sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","states","tones","variants"]},{name:"SkeletonDetail",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonForm",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonImage",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonInput",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"SkeletonNode",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonRows",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonStat",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"SkeletonTable",group:"feedback",frame:"docs/feedback/skeleton.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Slider",group:"data-entry",frame:"docs/data-entry/slider.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"SpaceCompact",group:"layout",frame:"docs/layout/space-compact.tsx",covered:[],untested:["accessibleName","async","contentStress","density","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones","variants"]},{name:"SplitPane",group:"layout",frame:"docs/layout/split-pane.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"StatCard",group:"data-display",frame:"docs/data-display/card/index.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"StatusBadge",group:"data-display",frame:"docs/data-display/badge.tsx",covered:["shapes","tones","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","sizes","states"]},{name:"Steps",group:"navigation",frame:"docs/navigation/steps.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","states","tones","variants"]},{name:"Swatch",group:"data-display",frame:"docs/data-display/swatch.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Switch",group:"data-entry",frame:"docs/data-entry/switch.tsx",covered:["sizes"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones","variants"]},{name:"Table",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableBody",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableCell",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableHead",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableHeader",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TableRow",group:"data-display",frame:"docs/data-display/table.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","tones"],notApplicable:["density","ownership","shapes","sizes","states","variants"]},{name:"Tabs",group:"navigation",frame:"docs/navigation/tabs.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","states","tones"]},{name:"TabsContent",group:"navigation",frame:"docs/navigation/tabs.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"TabsList",group:"navigation",frame:"docs/navigation/tabs.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones"]},{name:"TabsTrigger",group:"navigation",frame:"docs/navigation/tabs.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"TagInput",group:"data-entry",frame:"docs/data-entry/tag-input.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"Text",group:"general",frame:"docs/general/typography.tsx",covered:["sizes","tones"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","variants"]},{name:"Textarea",group:"data-entry",frame:"docs/data-entry/textarea.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"TextDiff",group:"data-display",frame:"docs/data-display/text-diff.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ThoughtChain",group:"data-display",frame:"docs/data-display/thought-chain.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"ThoughtChainItem",group:"data-display",frame:"docs/data-display/thought-chain.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","variants"],notApplicable:["density","ownership","shapes","sizes","tones"]},{name:"Thumbnail",group:"data-display",frame:"docs/data-display/thumbnail.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","sizes"],notApplicable:["density","ownership","shapes","states","tones","variants"]},{name:"Timeline",group:"data-display",frame:"docs/data-display/timeline.tsx",covered:["density","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["ownership","shapes","sizes","states","tones"]},{name:"TimelineGrid",group:"data-display",frame:"docs/data-display/timeline-grid.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TimePicker",group:"data-entry",frame:"docs/data-entry/time-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"TimeRangePicker",group:"data-entry",frame:"docs/data-entry/time-range-picker.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"Title",group:"general",frame:"docs/general/typography.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states","tones"],notApplicable:["density","ownership","shapes","sizes","variants"]},{name:"Toaster",group:"feedback",frame:"docs/feedback/toast.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Toggle",group:"data-entry",frame:"docs/data-entry/toggle.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","tones"]},{name:"ToggleGroup",group:"data-entry",frame:"docs/data-entry/toggle-group.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","tones"]},{name:"ToggleGroupItem",group:"data-entry",frame:"docs/data-entry/toggle-group.tsx",covered:["shapes","sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","tones"]},{name:"Toolbar",group:"navigation",frame:"docs/navigation/toolbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","states"],notApplicable:["density","ownership","shapes","sizes","tones","variants"]},{name:"ToolbarGroup",group:"navigation",frame:"docs/navigation/toolbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Tooltip",group:"feedback",frame:"docs/feedback/tooltip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"TooltipContent",group:"feedback",frame:"docs/feedback/tooltip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TooltipProvider",group:"feedback",frame:"docs/feedback/tooltip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TooltipTrigger",group:"feedback",frame:"docs/feedback/tooltip.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Topbar",group:"layout",frame:"docs/layout/topbar.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"TopbarItem",group:"layout",frame:"docs/layout/topbar-item.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Transfer",group:"data-entry",frame:"docs/data-entry/transfer.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Tree",group:"data-display",frame:"docs/data-display/tree.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","sizes","states","variants"],notApplicable:["density","shapes","tones"]},{name:"TreeSelect",group:"data-entry",frame:"docs/data-entry/tree-select.tsx",covered:["sizes","variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","tones"]},{name:"TwoFactorSetup",group:"feedback",frame:"docs/feedback/two-factor-setup.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones","variants"]},{name:"Typography",group:"general",frame:"docs/general/typography.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Upload",group:"data-entry",frame:"docs/data-entry/upload.tsx",covered:["variants"],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl","states"],notApplicable:["density","shapes","sizes","tones"]},{name:"UploadCropDialog",group:"data-entry",frame:"docs/data-entry/upload-crop-dialog.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","ownership","reducedMotion","responsive","rtl"],notApplicable:["density","shapes","sizes","states","tones","variants"]},{name:"VisuallyHidden",group:"general",frame:"docs/general/typography.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl"],notApplicable:["density","ownership","shapes","sizes","states","tones","variants"]},{name:"Welcome",group:"data-display",frame:"docs/data-display/welcome.tsx",covered:[],untested:["accessibleName","async","contentStress","keyboard","reducedMotion","responsive","rtl","variants"],notApplicable:["density","ownership","shapes","sizes","states","tones"]}],Ce=new Map(F.map(e=>[e.name.toLowerCase(),e]));function M(e){return Ce.get(String(e??"").trim().toLowerCase())}var b=[{number:1,title:"Storybook is mandatory",body:"Every primitive / shell / composite has a paired story under `src/stories/<group>/<Name>.stories.tsx` covering every variant + state on light + dark."},{number:2,title:"Tokens, not utilities",body:"Visual values come from CSS custom properties in `src/tokens/` + `src/styles/theme.css`. Token-named Tailwind utilities (`bg-background`) are fine; raw value utilities (`bg-blue-500`) are forbidden."},{number:3,title:"Radix for interactive primitives",body:"Anything with keyboard / ARIA / portal wraps the relevant Radix primitive."},{number:4,title:"shadcn-style ownership",body:"Primitives are thin wrappers; consumers can fork the source in place."},{number:5,title:"One i18next singleton",body:"`initI18n()` in `src/i18n/index.ts` is THE instance; consumers extend via `addResourceBundle`."},{number:6,title:"WCAG 2.1 AA baseline",body:"Every interactive primitive passes axe-core (keyboard nav, ARIA, focus-visible, 4.5:1 contrast, `prefers-reduced-motion`). Stories double as a11y test surfaces."},{number:7,title:"SemVer 2.0 + Keep a Changelog 1.1",body:"Every release-worthy change updates `CHANGELOG.md` under `## Unreleased` in the same PR."},{number:8,title:"Inclusive naming",body:"`allowlist` / `denylist`, `main` / `primary` / `replica` / `secondary`, `they/them`. Never `whitelist` / `blacklist` / `master` / `slave`. Lint-enforced."},{number:9,title:"No marketing speak",body:'Banned: "powerful", "robust", "blazing fast", "best-in-class", "seamless", "enterprise-grade". State what it does.'},{number:10,title:"English is canonical for docs",body:"Localised docs at `docs/i18n/<bcp47>/`; front-matter tracks staleness."},{number:11,title:"Submodule discipline",body:"Never push a pin to a SHA not on the submodule remote."},{number:12,title:"Branch + PR workflow",body:"`feat/<scope>` / `fix/<scope>` \u2192 submodule `main`. CI green + squash-merge. No direct push to `main`. `--no-verify` forbidden."},{number:13,title:"TypeScript strict",body:"Explicit types on every export. `forwardRef` for components; `ComponentPropsWithoutRef` for extension. No `any`. No `@ts-ignore` without comment + issue link."},{number:14,title:"Every third-party library is shadcn / Radix-recommended",body:"Locked stack: Radix UI, cmdk, sonner, lucide-react, react-aria-components + `@internationalized/date`, i18next + react-i18next, class-variance-authority + clsx + tailwind-merge. New peer \u2192 ADR documenting why it's the canonical choice."},{number:15,title:"No `@apply` re-encoding tokens",body:"Inside a primitive `.tsx`, don't `@apply` a Tailwind utility that re-encodes a token \u2014 reference the canonical CSS class from `tokens.css` instead. Composite token-named utilities remain fine."},{number:16,title:"CSS source-of-truth is `src/tokens/` + `src/styles/theme.css`",body:"A primitive that needs a new color / spacing / radius adds it there FIRST, then references it."},{number:17,title:"`src/stories/` \u2194 `src/components/` parity",body:"Story set matches primitive set under each group. CI-checked via `scripts/check-stories-parity.mjs`."},{number:18,title:"`docs/reference/<group>/` \u2194 `src/components/<group>/` parity",body:"Every primitive has a reference page; every page maps to a primitive. CI-checked via `scripts/check-docs-parity.mjs`."},{number:19,title:"No service-specific anything",body:'`me-service`, `forge-service`, `admin-service` never appear in source / comments / prop names. Per-deployment brand color lives at `[data-accent="<palette>"]`.'},{number:20,title:'No "platform-only" exports',body:"Every primitive ships via `package.json::exports`. Internal-only helpers stay un-exported."},{number:21,title:"Every component honours every theme axis",body:"`data-theme` (light / dark), `data-accent` (6 palettes), `data-density` (compact / default / comfortable), `data-font-size` (sm / base / lg / xl). Read from tokens, never hardcode values."},{number:22,title:"100% match to the design canon",body:'Every visual literal comes from `design-handoff/ui-system/<latest-bundle>/`. Token-pin canon literals; never substitute "close enough". If the bundle doesn\'t cover a case \u2014 STOP, ask the user to mock it.'},{number:23,title:"Concept-first prop API",body:"One concept per prop. Reuse shared vocabulary (`size`, `variant`, `color`, `tone`, `accent`, `padding`, `density`, `orientation`, `placement`, `current`, `value` / `defaultValue` / `onValueChange`, `open` / `defaultOpen` / `onOpenChange`, `justify`, `sticky`, `offset`). Before adding a new prop or token: grep for an existing one."},{number:24,title:"Mobile-first",body:"Defaults target `xs` (\u22650px); progressive enhancement via `sm:` / `md:` / `lg:` / `xl:` / `2xl:`. Touch targets \u2265 44 \xD7 44 px (`--touch-target-min`, does NOT scale with density). Runtime viewport via `useBreakpoint`, never `window.innerWidth`. Stories render at narrow viewport first."},{number:25,title:"Stories are docs; UI is the primitive",body:"When a story looks wrong, fix the primitive / CSS / token. Never paper over with a story tweak. Story-only diff without a paired primitive / CSS / token diff is rejected."},{number:26,title:"Library isolation",body:"`dist/` ships only the consumer surface. Storybook, tests, scripts, design-handoff, `dev-probe/` stay out of npm. Every `dependencies` entry is `external` in `tsup`. Verification via `pnpm pack` + grep of `dist/`."},{number:27,title:"Per-group folder structure",body:"Primitives at `src/components/<group>/<Name>.tsx`; six canonical groups (general, layout, data-display, data-entry, feedback, navigation). Barrel = `src/components/primitives.ts` (single file). Stories + reference docs mirror the same group hierarchy."},{number:28,title:"`src/` folder taxonomy",body:"Three classes: consumer surface (matched by `tsup` entry + `package.json::exports`), Storybook-only (`src/stories/`), build-input-only (`cn.ts`, per-group sources consumed via the barrel). No `src/lib/`, `src/utils/`, `src/internal/`, `src/clients/`, `src/screens/`. Service clients live with the composite that uses them."},{number:29,title:"Stories consume framework primitives only",body:"No raw `<button>` / `<input>` / hand-rolled chips when a primitive exists. HTML semantics (`<section>`, `<article>`, \u2026) for structure are fine. Inline `style={{}}` limited to layout / positioning; no colour / radius / typography overrides."},{number:30,title:"Story `render` returns JSX directly",body:"No opaque `<XyzDemo />` wrapper components, no zero-arg `Demo` helpers. Use `render: function StoryName() { \u2026 }` so Storybook's source panel shows runnable JSX, not `<XyzDemo />`."},{number:31,title:"No nested wrapper / convenience primitives",body:"One Radix base = one framework primitive. `<SimpleX>` over `<X>` is forbidden; add a prop to `<X>` instead. Composites under `src/components/composites/` that combine multiple primitives are NOT wrappers."},{number:32,title:"No redundant props",body:"Before adding a prop / item field / variant, grep the existing surface; if a field already covers the concept, use it. Top-level prop that re-expresses an item field (Timeline `pending` \u2194 `items[i].animate`) is rejected."},{number:33,title:"Stories / source / docs name-synchronized",body:"No two names for the same export across the framework surface; no legacy aliases in stories / docs (source may keep an alias for a deprecation cycle, but the marketing surfaces use the canonical name only)."},{number:34,title:"Storybook source panel = real, copy-paste-ready code",body:'Storybook\'s react-docgen serializer strips every function value (`cell: ({row}) => <JSX/>`, `render: ({field}) => <Input/>`, `rowClassName`, `renderItem`, \u2026) to `() => {}`. Any story whose `render` passes a function-valued prop, references a module-level helper (`Badge`, `EMPLOYEE_COLUMNS`, etc.), or uses a render-prop pattern MUST override `parameters.docs.source.code` with the literal copy-paste-ready snippet \u2014 type aliases, helper functions spelled out, column definitions with cell JSX visible, inline data array. The `render()` callback stays as-is (module-level constants are fine for runtime performance); `source.code` is the marketing surface. Skip ONLY for stories whose JSX is purely static primitives Storybook can serialize verbatim (`<Button variant="primary">Click</Button>`).'},{number:35,title:"Status chips never wrap",body:"A `Badge` / `Badge` reads as one atomic unit. Its label must never break across lines \u2014 pin `white-space: nowrap` on the chip (done in `badge-layout.css`), especially inside narrow `DataTable` cells (\u30B9\u30B3\u30FC\u30D7 / \u30B9\u30C6\u30FC\u30BF\u30B9 columns). If a cell is too tight, widen the column or shorten the label; never let the chip wrap."},{number:36,title:"Badge tone/icon are the colour escape hatch",body:"For ANY other value \u2014 localized labels (\u516C\u958B\u4E2D, \u30A2\u30AF\u30C6\u30A3\u30D6) or categorical tiers (\u4F1A\u54E1\u30E9\u30F3\u30AF, \u5951\u7D04\u30D7\u30E9\u30F3) \u2014 pass `tone` explicitly (success | warning | destructive | info | neutral) and, for non-lifecycle tiers, `icon={null}` to drop the misleading glyph. Don't let domain labels fall back to neutral grey + \u25CB. Map domain\u2192tone in the CONSUMER layer; the framework only provides the props."},{number:37,title:"DataTable is full-width \u2014 never inside a narrow grid column",body:"A multi-column `DataTable` occupies its OWN row at the page's full width: `<Card><CardContent flush><DataTable \u2026/></CardContent></Card>`. Never nest it in a `lg:col-span-2` of a `ResponsiveGrid columns={3}` beside a chart \u2014 the columns get squeezed until CJK text collapses to one character per line. Charts / KPI cards go in their own row ABOVE the table. (See the `inertia-list-page` pattern.)"},{number:38,title:"FilterBar stays OUT of CardContent flush",body:"`CardContent flush` strips horizontal padding for edge-to-edge tables. A `FilterBar` placed inside it loses all padding and sticks to the card edge. Render `FilterBar` as a STANDALONE block above the table card; wrap ONLY the `DataTable` / `EmptyState` in the `Card` + `CardContent flush`. Order on a list page: KPIs \u2192 FilterBar \u2192 table card."},{number:39,title:"Long text columns get an explicit width",body:"For columns whose value can be long (name / title / segment / address), set `col.width` to a Tailwind width class (e.g. `w-64`, `w-48`) so the column reserves space instead of shrinking and wrapping to many lines; leave numeric / status columns auto. Table cells default to `white-space: nowrap`, so an over-tight table scrolls horizontally rather than crushing \u2014 give the important columns real widths so the default layout reads well before any scroll."},{number:40,title:"Pages are mobile-first",body:'Author and verify every page at 320\u2013390px FIRST. Page sections are spaced by `PageContainer` itself (`--page-body-gap` between its direct children). Inside a section spacing comes only from `Flex` `gap` (vertical rhythm = `Flex direction="col"`, control rows = the default `direction="row"`) + `ResponsiveGrid columns={2|3|4}` (which collapse to a single column on narrow screens) \u2014 never raw `p-*` / `gap-*` / `space-*` utilities for page layout (the static audit rejects them). Styles are loaded whole: `@godxjp/ui/styles` or `styles/core`, never a hand-picked set of layers. They differ ONLY in the 729 bundled CJK `@font-face` declarations, and that difference is most of the CSS: 367 KB vs 86 KB gzip for a 15-component app (gh#971) \u2014 pick `styles/core` whenever the app loads fonts another way.'},{number:41,title:"Drawer & dialog footer layout",body:'Sheet/Dialog/AlertDialog footers are a pinned action bar (the Drawer footer convention): the footer sticks to the bottom, SheetFooter draws a full-bleed top border, and actions are RIGHT-aligned with the PRIMARY button rightmost (Cancel/secondary to its left). A destructive / clear / reset action goes far-LEFT \u2014 give that button `className="me-auto"` \u2014 the logical edge, so the action stays on the reading-start side under RTL too. NEVER stack footer buttons full-width or center them.'},{number:42,title:"Props & Tokens Before Customization",body:"Before reaching for a Tailwind class, inline `style`, or extra CSS, you MUST first check whether the component already supports the need via a PROP, a design TOKEN, or a layout/typography PRIMITIVE. godx-ui is meant to be enough on its own: `className` is for genuine one-offs only \u2014 never to redo what an API already does. Specifically: (1) NEVER hand-roll typography \u2014 no `text-[13px]`/`text-[11px]` arbitrary px (bypasses the golden type scale), no `font-medium`/`font-semibold`/`text-muted-foreground` on a raw `<span>`; use `<Text size tone weight tabular mono>` / `<Heading level>`. (2) NEVER hand-roll a trivial flex/grid wrapper; use `<Flex>` / `<ResponsiveGrid>` / `<PageContainer>`. (3) NEVER set a control's radius/height/colour with a utility when a `shape`/`size`/`tone`/token exists."},{number:43,title:"Every form control goes through FormField",body:"Consumers MUST wrap every labelled form control (Input, Select, DatePicker, NumberInput, Radio.Group, Checkbox groups, range pairs, ...) in FormField \u2014 it owns the label (aria-labelledby, never a dangling <label for>), auto-generates/injects the control id, and wires aria-describedby/aria-errormessage/aria-invalid. Bare controls are the rare exception (e.g. a toolbar quick-filter with its own aria-label) and must carry id/name + aria-label themselves. Never hand-roll a label+control stack with Text/Label."},{number:44,title:"Chrome is a token, default quiet",body:"Any decorative chrome a component draws \u2014 dividers, separator borders, and the padding that exists only to space that chrome \u2014 MUST read a token; never hard-code it in `src/styles/*.css` (a hard-coded `border-bottom: 1px solid hsl(var(--border))` leaves consumers no off-switch short of a variant fork). The DEFAULT is the quietest state (`none` / balanced rhythm); a service theme opts IN, e.g. `--page-header-divider: 1px solid hsl(var(--border))`."},{number:45,title:"Every service-tunable constant gets a knob",body:'When component CSS encodes a geometry choice that a service plausibly re-tunes to match its design handoff \u2014 form label column width, label\u2194control gap, header insets \u2014 it MUST be a documented component token (current value as the default). The theme sets it ONCE globally; props (`labelWidth`) override per instance; Form\u2192FormField priority stays intact. The test: "would a service theme.css want to change this to match its design grid?" If yes and the only route is forking CSS, that is a library gap \u2014 fix the library, don\'t patch the app.'},{number:46,title:"Typography is tokens, default is base",body:"The DEFAULT body size is `--font-size-base`; components render body/UI text at `base`, not at the `sm` alias. Smaller-by-design text (badge, section label, caption) is a component token defaulting to a small step (`--badge-font-size: var(--font-size-xs)`), so a service re-tunes that part without moving the global scale. The `sm`/`xs` tokens stay for the explicit `<Text size>` API. Every component token is surfaced in the MCP `get_component` output (check:mcp-token-sync)."},{number:47,title:"The layer contract \u2014 cascade layers, not specificity",body:'Every rule this package ships is inside a cascade layer, and layer order beats specificity outright. Two consequences. (1) INSIDE the package: `@layer components` is EARLIER than Tailwind\'s `utilities`, so a utility a component emits on its own element (`<table class="text-sm">`) silently outranks the component rule meant to own that property \u2014 no selector can win. A responsive re-point that must beat such a utility goes in `@layer godxjp-ui-responsive`, declared after Tailwind in `styles/base.css` and therefore LAST; it is reserved for `@container`/`@media` re-points, never static rules.'},{number:48,title:"Two token value forms \u2014 read the call site before you set a colour",body:"A colour token holds EITHER bare HSL components (`--card: 60 33% 99%`, read as `hsl(var(--card))`) OR a complete CSS colour (`--card-tint: hsl(var(--primary) / 4%)`, read as `var(--card-tint)`). The NAME does not tell you which, and neither does the tier: `--menu-item-hover-background` / `--tree-node-hover-background` / `--table-row-hover-background` take a complete colour while `--segmented-item-hover-background` / `--topbar-item-hover-background` take components \u2014 five knobs for the same hover fill, all defaulting to `--accent`. Measured: 346 published tokens hold a colour, 96 components / 249 complete, and 3 say which. SET THE WRONG FORM AND NOTHING SAYS SO: the declaration is invalid at computed-value time, the property takes its own INITIAL value (`transparent` for a background) and the call-site fallback is NOT used \u2014 so the surface shows what is behind it and reads exactly like a knob that does not work (a table header measured 1.03:1 this way). The tell in DevTools: the custom property holds what you wrote and the painted property is `rgba(0, 0, 0, 0)`. To check a knob: `grep -rho 'hsl(var(--NAME\\|var(--NAME' node_modules/@godxjp/ui/dist` \u2014 `hsl(var(--NAME` means components, bare `var(--NAME` means complete. Grep `dist` whole: some knobs are read from a component's JS, not its CSS. SUB-TRAP: a components role may carry an alpha (`--card: 0 0% 100% / 42%` is how a glass theme works) but 83 declarations across 15 roles apply their OWN alpha (`hsl(var(--accent) / 0.7)`), and a second `/` is a parse error \u2192 transparent. `--primary`, `--muted`, `--destructive`, `--warning`, `--success`, `--info`, `--accent`, `--foreground`, `--muted-foreground`, `--table-row-tone-color`, `--background`, `--destructive-foreground`, `--secondary`, `--accent-foreground`, `--ring` all have at least one such reader; `--card` and `--popover` have none. docs/CUSTOMER-THEMING.md \"Building a COMPLEX theme\" \xA71."},{number:49,title:"Interaction states are 95 separate tokens \u2014 resting state is not one of them",body:'Hover, active, selected, checked, pressed and focus are their own tokens: 95 published (`node -e "const t=require(\'./node_modules/@godxjp/ui/agent/tokens.json\'); console.log(t.filter(x => /-(hover|active|selected|checked|pressed|focus)(-|$)/.test(x.name)).length)"`), 62 of which paint a colour, an edge or an elevation. A theme that re-materialises a surface and sets only its RESTING fill ships every other state broken, and each defect is reported from a screenshot rather than by a gate: a sidebar row at dark-violet-on-violet (`--sidebar-item-active-foreground` defaults to the live `--primary-active`, src/styles/shell-layout.css:2289-2291), a Segmented hover with a dark fill under dark text (`--segmented-item-hover-background` set without `--segmented-item-hover-color`), a Topbar hover block. `--focus-ring-color` is on that list and a ring that fails 3:1 on its new ground is a WCAG 2.2 SC 1.4.11 defect, not a polish item. THE METHOD: for every component you re-theme, list its tokens (`get_component`, or `grep -- "--<component>-" node_modules/@godxjp/ui/dist/tokens/components/`) and set the state rows at the same time as the resting row. A state knob left at its default resolves against the LIVE role at the painting element \u2014 the correct default, and exactly why it can be wrong for you once `--accent` is no longer pale.'},{number:50,title:"A scoped theme must state its own `color`",body:"`src/styles/base.css:261` sets `color: hsl(var(--foreground))` on `body`, which is above every scope a consumer can make, so that `var()` substitutes against the ROOT's `--foreground` exactly once and every element below inherits the already-resolved colour. A plain `<div>` carrying a theme's tokens therefore retints every SURFACE and no TEXT: measured, a title whose own computed `--foreground` was the theme's near-white still painted `rgb(36, 35, 30)`, 1.34:1 on real pixels, with every element reporting it was inside the scope (gh#881). It is the \xA73 freeze rule applied to a PROPERTY instead of a token, and worse there \u2014 a token can be given a knob and `color` on `body` cannot. FIX, React: wrap the region in `ThemeScope` (`@godxjp/ui/app`), which re-states `color` on its own element (src/lib/overlay-portal.tsx:270, `display: contents` so the box goes and the inheritance stays) AND on the body-level host it creates for portalled overlays (:203) \u2014 the other half, since a Dialog portals to `document.body` and would otherwise wear the root's theme. FIX, stylesheet-only scope: declare `color: hsl(var(--foreground))` on your own selector alongside the tokens; that is your element, not a selector into this package, so cardinal rule \"a consumer sets tokens, never selectors\" permits it \u2014 but it does NOT reach portalled overlays. docs/TOKEN-RESOLUTION.md \xA75 rule 7."}];function A(e){return b.find(t=>t.number===e)}var v=[{name:"common-fixes",tagline:"Fix the most common @godxjp/ui consumer mistakes & visual bugs (StatCard double-border, grey Badge, crushed/empty table headers, washed-out sidebar footer, Inertia layout crash, SSR hydration). Before \u2192 after.",tags:["fixes","migration","bug","cardstat","statusbadge","datatable","sidebar","gotcha","review"],code:`// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 // 0) \u2605 MOST COMMON: <Card> body has NO padding (content is flush against the edges)
 //    Cause: the bare <Card> has ZERO inner padding \u2014 it MUST contain <CardContent>.
 //    Don't hand-roll padding with className="p-4" on the Card either.
@@ -4982,7 +4982,7 @@ A block with no reason is IGNORED and the finding stands. An unclosed block runs
 The class-shaped rules (gap-*/p-*/m-*, bg-<palette>-*, w-[\u2026], pr-*, dark:*) only read class
 expressions \u2014 a className/class attribute, a class-named binding (\`baseClass\`, \`statusStyles\`,
 \`badgeVariants\`) or a cn()/clsx()/cva() call \u2014 so prose that merely spells a utility is not a
-finding and needs no suppression.`,oe=[{id:"dialog-needs-body",severity:"error",category:"composition",standard:null,fix:"Wrap a Dialog/Sheet's middle in <DialogBody>/<SheetBody>. The scroll lives on the body \u2014 the content box is `overflow: hidden` with no max-height \u2014 so an overlay without one clips long content at BOTH ends and takes the footer's buttons with it, leaving Escape as the only way out. It only shows on real data, never on demo data (gh#617)."},{id:"no-utility-spacing",severity:"error",category:"composition",standard:null,fix:"Remove gap-*/p-*/m-* from your own markup; space siblings with <Flex gap> / <ResponsiveGrid>. Page sections are spaced by <PageContainer> (docs/CONSUMER-RULES.md \xA73)."},{id:"no-utility-layout",severity:"error",category:"composition",standard:null,fix:'Replace className="flex \u2026" / "grid \u2026" with <Flex> (row), <Flex direction="col"> (stack) or <ResponsiveGrid columns>.'},{id:"no-hand-rolled-surface",severity:"warn",category:"composition",standard:null,fix:"A rounded+border/bg div is a fake surface \u2014 use Card, Badge, Avatar, ListRow, Descriptions or EmptyState so height, padding and radius come from tokens. A read-only sample of a colour a USER chose is Swatch, which takes that value as a prop (gh#527)."},{id:"sibling-cards-need-flex",severity:"warn",category:"composition",standard:null,fix:'Wrap adjacent <Card>s in <Flex direction="col" gap="lg"> or <ResponsiveGrid>; direct children of PageContainer are spaced by the page already.'},{id:"no-raw-palette-color",severity:"error",category:"tokens",standard:null,fix:"Use semantic tokens (bg-primary, text-muted-foreground), never raw palette (bg-blue-500)."},{id:"no-arbitrary-hex",severity:"error",category:"tokens",standard:null,fix:"No hardcoded hex in className; read design-system color tokens."},{id:"no-arbitrary-spacing",severity:"error",category:"tokens",standard:null,fix:"No p-[13px]/gap-[7px]; use the token scale / <Flex gap> / <PageContainer>."},{id:"no-arbitrary-size",severity:"error",category:"tokens",standard:null,fix:"No w-[37px]/h-[260px]; use token sizes or a sizing prop (min-w-[\u2026] allowed)."},{id:"no-arbitrary-typography",severity:"error",category:"tokens",standard:null,fix:"No text-[20px]/leading-[1.7]; use the golden-ratio type-scale tokens."},{id:"no-arbitrary-radius",severity:"error",category:"tokens",standard:null,fix:"No rounded-[6px]; use rounded-sm/md/lg radius tokens."},{id:"no-off-scale-token-value",severity:"warn",category:"tokens",standard:null,fix:"A design-system knob you override takes a step (style={{ '--card-space-inset': 'var(--space-4)' }}) or a calc() from one (calc(var(--space-4) + 2px)), not a raw 13px. Only axes that HAVE a scale count: space/padding/gap/margin, font-size, radius, icon-size (width/height/size/offset have none yet, so a number there is fine). A value that is genuinely off the grid keeps its literal and says why in place, with a /* scale-exempt: 6px status dot, below --space-1 */ comment on that line or the one above."},{id:"no-dark-color-override",severity:"warn",category:"tokens",standard:null,fix:"Drop dark: color overrides \u2014 semantic tokens already adapt."},{id:"raw-white-black",severity:"warn",category:"tokens",standard:null,fix:"Prefer semantic tokens (text-primary-foreground, bg-background) over raw white/black."},{id:"no-domain-tracking-token",severity:"error",category:"tokens",standard:null,fix:"No package-tracking/domain tokens; use semantic tokens or app theme overrides."},{id:"no-space-xy",severity:"error",category:"tokens",standard:null,fix:"Use <Flex gap> instead of space-x/y-*."},{id:"no-raw-select",severity:"error",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use <Select> from @godxjp/ui, not a raw <select>."},{id:"no-raw-table",severity:"error",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use the <Table>/<DataTable> family, not a raw <table>."},{id:"no-raw-input",severity:"error",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use <Input> from @godxjp/ui, not a raw <input>."},{id:"no-raw-textarea",severity:"warn",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use <Textarea> from @godxjp/ui, not a raw <textarea>."},{id:"no-raw-button",severity:"error",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use <Button> from @godxjp/ui, not a raw <button>."},{id:"card-manual-padding",severity:"error",category:"composition",standard:null,fix:"Wrap the body in <CardContent>; don't hand-roll padding on <Card>."},{id:"card-needs-content",severity:"error",category:"composition",standard:null,fix:"<Card> body must be in <CardContent> (no padding otherwise); flush only for a full-bleed table."},{id:"bare-control-needs-formfield",severity:"warn",category:"composition",standard:"WCAG 2.2 SC 1.3.1 \xB7 3.3.2 \xB7 @godxjp/ui FormField (cardinal rule 227)",fix:"Wrap a labelled control in <FormField label=\u2026> \u2014 it owns label\u2194control id wiring, aria/error, AND the field rhythm; never pair a bare <Label> with an <Input>."},{id:"formfield-needs-form",severity:"error",category:"composition",standard:"@godxjp/ui Form (gh#998)",fix:'Wrap FormFields in <Form layout="horizontal" labelWidth controlWidth>; a row of fields is <SpaceCompact> or <Form columns>, never a hand-rolled <Flex>. A field component whose whole output is one FormField is exempt.'},{id:"mixed-button-size",severity:"error",category:"composition",standard:null,fix:'Sibling <Button>s under one parent (through fragments, {cond && \u2026}, ternaries, Tooltip wrappers) share ONE size; a missing size is default; icon-sm pairs with sm, icon-xs with xs, icon with default. Never `size="sm"` beside a default Button in one action row.'},{id:"dialog-form-too-big",severity:"error",category:"composition",standard:"@godxjp/ui form placement (gh#998)",fix:"Three or more FormFields in a Dialog body is a page: give the form its own route. Dialogs hold a confirmation or one or two fields; a side Sheet (drawer) may hold a filter or edit form."},{id:"select-width-hint",severity:"warn",category:"composition",standard:"GOV.UK Design System \xB7 text input width",fix:"Size a Select for its content \u2014 `controlWidth` on the FormField, or once on the <Form>."},{id:"manual-field-error",severity:"warn",category:"composition",standard:"WCAG 2.2 SC 3.3.1",fix:"Use <FormField error=\u2026>, not a hand-rolled <p class='text-destructive'>."},{id:"manual-field-helper",severity:"warn",category:"composition",standard:null,fix:"Use <FormField helper=\u2026>, not a hand-rolled helper <p>."},{id:"status-tone-not-variant",severity:"error",category:"api",standard:null,fix:"Badge/Tag/StatCard status uses tone, not variant (variant is structural)."},{id:"value-callback-on-value-change",severity:"error",category:"api",standard:null,fix:"Abstract value components use onValueChange, not onChange."},{id:"icon-button-needs-name",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 4.1.2 \xB7 1.1.1 \xB7 WAI-ARIA 1.2 \xB7 Accessible Name Computation 1.2",fix:"Name <Button size='icon'> with aria-label={t('\u2026')} OR from content \u2014 a <VisuallyHidden>/sr-only child beside the aria-hidden glyph. Text inside an aria-hidden subtree names nothing."},{id:"img-needs-alt",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 1.1.1 \xB7 HTML Living Standard",fix:"Add alt to every <img> (alt='' if decorative); prefer <Avatar>/<AspectRatio>."},{id:"no-positive-tabindex",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 2.4.3 \xB7 WAI-ARIA APG",fix:"Use tabIndex 0 or -1 only; never positive \u2014 it breaks focus order."},{id:"hand-rolled-close-glyph",severity:"warn",category:"a11y",standard:"WAI-ARIA 1.2 (dialog) \xB7 WCAG 2.2 SC 4.1.2",fix:"Pass onDismiss to <Alert>, or use <Dialog>/<Sheet>'s built-in labelled close \u2014 not a bare \u2715."},{id:"no-hand-rolled-scrollport",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 2.1.1 (Keyboard) \xB7 WAI-ARIA 1.2 (group) \xB7 Deque axe-core scrollable-region-focusable",fix:'Replace className="overflow-auto / overflow-y-auto / overflow-x-auto / overflow-scroll" on your own element with <ScrollArea label={t("\u2026")} orientation>, which is the tab stop, the role and the localized name \u2014 and withholds all three while there is nothing to scroll. A browser audit only fails a scrollport whose content has NO focusable child, so the same markup is clean or broken depending on the data; this reads the markup instead (gh#825). overflow-hidden is a clipping box, not a scrollport, and is not flagged.'},{id:"no-emoji-in-ui",severity:"warn",category:"i18n",standard:"Unicode UTS #51 \xB7 WCAG 2.2 SC 1.1.1",fix:"No emoji in product UI; quiet i18n copy + Lucide icon + Badge tone."},{id:"no-emoji-flag",severity:"warn",category:"i18n",standard:"ISO 3166-1 \xB7 ECMA-402 Intl.DisplayNames \xB7 Unicode UTS #51",fix:"Derive country names from Intl.DisplayNames; no emoji flags."},{id:"hardcoded-currency",severity:"warn",category:"i18n",standard:"ISO 4217 \xB7 ECMA-402 Intl.NumberFormat",fix:"Format money with Intl.NumberFormat({ style: 'currency', currency }), not \xA5{amount}."},{id:"raw-intl-date",severity:"warn",category:"i18n",standard:"ISO 8601 \xB7 IANA tz \xB7 ECMA-402 Intl.DateTimeFormat",fix:"Use formatDate from @godxjp/ui/datetime, not hand-built or locale-default dates."},{id:"no-physical-direction",severity:"warn",category:"rtl",standard:"W3C CSS Logical Properties L1 \xB7 WCAG 2.2 (1.3.2)",fix:"Use logical utilities (ms-/me-/ps-/pe-, start-/end-, text-start/end, border-s/e, rounded-s/e)."},{id:"no-em-dash-in-copy",severity:"warn",category:"copy",standard:"@godxjp/ui reference-design typography",fix:"No em-dash (\u2014) in copy; use a middot \xB7 or two calm sentences."},{id:"lucide-icon-needs-size",severity:"warn",category:"composition",standard:"WCAG 2.2 SC 1.4.4 \xB7 @godxjp/ui icon scale (--icon-size-*)",fix:'A lucide glyph outside a sizing context draws at its intrinsic 24px. Render it as <Icon as={Lock} size="sm" tone="muted" /> \u2014 the primitive puts it on the --icon-size-* scale and is aria-hidden unless you pass a label.'},{id:"no-hand-rolled-list",severity:"warn",category:"composition",standard:"WAI-ARIA 1.2 (list / listitem) \xB7 HTML Living Standard (ul/ol/li) \xB7 WCAG 2.2 SC 1.3.1",fix:'Build the list as <Flex as="ul" marker="none" direction="col" gap="none"> with <ListRow as="li"> rows \u2014 not a raw <ul>/<ol> (no gap token), not <div role="list">/<div role="listitem">, and never a wrapper around each row: the divider is :not(:last-child) among SIBLINGS, so a row alone in its own wrapper loses it silently (a consumer lost every divider in a settings menu and a dashboard this way). marker="none" keeps the element, the <li> semantics and the gap, and drops the bullet and the --space-5 indent (gh#714). A deliberate exception \u2014 a drag-and-drop Kanban column, an evidence list inside a TableCell \u2014 takes an ui-audit-disable-line that says so.'},{id:"no-hand-rolled-break-anywhere",severity:"warn",category:"composition",standard:"CSS Text 3 \xA75.5 (overflow-wrap) \xB7 WCAG 2.2 SC 1.4.10 (Reflow)",fix:`Replace className="[overflow-wrap:anywhere] break-words whitespace-normal" (or wrap-anywhere) with <Text break="anywhere">, which emits overflow-wrap: anywhere AND releases a table cell's inherited nowrap, so an email, code or id shrinks its column to the viewport. Not whitespace="pre-wrap": its break-word does not lower min-content, so a table cell stays wide (gh#927).`}];function re(e){return e?oe.filter(t=>t.category===e):oe}var le="node node_modules/@godxjp/ui/scripts/visual-audit.mjs <baseUrl> [route \u2026]  (optional peers, TESTED range: playwright >=1.55 <2 [1.61.1] + @axe-core/playwright >=4.10 <5 [4.12.1] + axe-core >=4.10 <5 [4.12.1] + a chromium via `playwright install chromium`; --strict for a CI gate, --format json ALWAYS emits valid JSON with a status of ok|partial|error separating infra errors[] from product findings[], --rules to print this catalog)",se=[{id:"css-layers-missing",severity:"error",category:"layout",standard:"@godxjp/ui styles contract (styles / styles/core are the only entries)",fix:"Import `@godxjp/ui/styles` (or `styles/core` without fonts \u2014 86 KB instead of 367 KB gzip, since the bundled @font-face declarations are most of the CSS, gh#971); never cherry-pick *-layout.css \u2014 a missing layer renders naked menus and unsized Select rows."},{id:"control-height-mismatch",severity:"error",category:"layout",standard:"@godxjp/ui control tier (--control-height) \xB7 Nielsen consistency heuristic",fix:"Every control in one row must share --control-height; replace hand-rolled pills with Avatar/Button/Badge, never restyle a control's height."},{id:"mixed-button-height",severity:"error",category:"layout",standard:"@godxjp/ui Button size (one size per row) \xB7 Nielsen consistency heuristic",fix:"Buttons in one flex row must render at one height (within 0.5px): one `size` per row; icon-sm pairs with sm, icon-xs with xs, icon with default. Runtime twin of the static mixed-button-size rule."},{id:"sibling-card-gap",severity:"error",category:"layout",standard:"@godxjp/ui spacing scale (docs/SPACING.md)",fix:'Adjacent Cards need one space step between them \u2014 <Flex direction="col" gap>, <ResponsiveGrid>, or direct children of PageContainer.'},{id:"row-content-starved",severity:"warn",category:"layout",standard:"WCAG 2.2 SC 1.4.10 reflow",fix:`A sibling (a w-full SelectTrigger) takes the row's width and truncates its neighbours \u2014 give the Select width="auto" or move it out of the row.`},{id:"axe-violations",severity:"warn",category:"a11y",standard:"WCAG 2.2 A/AA \xB7 WAI-ARIA 1.2 (axe-core engine)",fix:"Fix each axe node \u2014 contrast (1.4.3), name/role/value (4.1.2), ARIA, landmarks. Runs on the REAL DOM, catching what static analysis cannot."},{id:"target-size-min",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 2.5.8 (24\xD724 AA) \xB7 2.5.5 (44\xD744 AAA)",fix:"Interactive targets must be \u226524\xD724 CSS px; size from the --control-height tier."},{id:"oversaturated-accent",severity:"warn",category:"color",standard:"@godxjp/ui reference-design \u6E0B\u307F (OKLCH chroma \u2264 0.18)",fix:"Desaturate brand/primary surfaces (OKLCH chroma \u2264 0.18); read --primary tokens, no raw vivid bars. The accent @godxjp/ui itself ships is exempt (gh#823) \u2014 this finding is always a colour someone chose."},{id:"emoji-rendered",severity:"warn",category:"i18n",standard:"Unicode UTS #51 \xB7 WCAG 2.2 SC 1.1.1",fix:"Remove emoji from rendered product text; quiet i18n copy + Lucide icon + Badge tone."},{id:"alert-controls-misplaced",severity:"warn",category:"layout",standard:"@godxjp/ui Alert anatomy \xB7 WAI-ARIA 1.2 \xB7 WCAG 2.2 SC 4.1.2",fix:"Use <Alert>: one leading tone icon, <Alert.Actions> trailing-right normal width, onDismiss \xD7 top-right, one horizontal row."}];function de(e){return e?se.filter(t=>t.category===e):se}var h={name:"@godxjp/ui-mcp",version:"31.25.4",godxUiCompatibility:"31.25.x",description:"Model Context Protocol server for @godxjp/ui \u2014 gives Claude Code / Codex CLI / Cursor / any MCP-aware agent live access to the component catalog, prop vocabulary, design tokens, 45 cardinal rules, copy-paste-ready patterns, 12 design / taste skills synthesised from Leonxlnx/taste-skill, 20+ anti-AI-tell patterns, and a 50-check redesign audit \u2014 token-efficient (list \u2192 drill-down).",type:"module",main:"./dist/index.js",module:"./dist/index.js",types:"./dist/index.d.ts",bin:{"godx-ui-mcp":"./dist/index.js"},files:["dist","README.md"],publishConfig:{registry:"https://registry.npmjs.org/",access:"public"},repository:{type:"git",url:"git+https://github.com/godx-jp/godxjp-ui.git",directory:"mcp"},homepage:"https://github.com/godx-jp/godxjp-ui/tree/main/mcp#readme",license:"Apache-2.0",scripts:{build:"tsup",dev:"tsup --watch",start:"node dist/index.js",inspect:"npx @modelcontextprotocol/inspector node dist/index.js","type-check":"tsc --noEmit",test:"vitest run",prepublishOnly:"npm run build"},dependencies:{"@modelcontextprotocol/sdk":"^1.29.0",zod:"^4.4.3"},devDependencies:{"@types/node":"^22.10.0",tsup:"^8.5.1",typescript:"^6.0.3",vitest:"^4.1.6"},keywords:["mcp","model-context-protocol","godxjp","ui","design-system","react","claude","cursor"],author:"GoDX (https://godx.jp)",bugs:{url:"https://github.com/godx-jp/godxjp-ui/issues"}};var H=[{name:"list_skills",description:"List every design/taste skill bundled by this MCP (id + name + whenToUse + section ids). Use FIRST to discover skills; then `get_skill_section` to drill in.",inputSchema:{type:"object",properties:{}}},{name:"list_primitives",description:"List every @godxjp/ui primitive/composite/shell (group + tagline per entry). Optionally filter by group. Then `get_component` for one's full API.",inputSchema:{type:"object",properties:{group:{type:"string",enum:["general","layout","data-display","data-entry","feedback","navigation","composites","shell","providers"]}}}},{name:"list_utilities",description:'List every NON-component public export of @godxjp/ui \u2014 hooks, helper functions and constants (cn, formatDate, formatCurrency, toast, useDebouncedValue, buttonVariants, CHART_COLORS, SHOW_PARENT \u2026). Reach for this before hand-writing a className merger, a date/money formatter, a debounce hook or a chart palette: two products in this org each re-implemented `cn` because it could not be found. Optionally filter by kind. Then `get_component name="<name>"` for its signature, usage and example.',inputSchema:{type:"object",properties:{kind:{type:"string",enum:["hook","function","value"],description:"hook = only legal inside a component body; function = callable anywhere; value = a constant to read."}}}},{name:"list_patterns",description:"List every canonical copy-paste code pattern (signup-form, settings-page, data-table-page, async-data-state, confirm-destructive, \u2026); common aliases resolve too. Use before `get_pattern`.",inputSchema:{type:"object",properties:{}}},{name:"list_anti_ai_tells",description:"List every AI-tell pattern to AVOID (optionally by category). Use to self-audit a design before shipping; then `get_anti_ai_tell` for the fix.",inputSchema:{type:"object",properties:{category:{type:"string",enum:["visual","layout","copy","interaction","imagery","structure"]}}}},{name:"list_redesign_checks",description:"List the redesign audit checklist (50+ checks; optionally by category). Use when auditing an existing project; then `get_redesign_check` for a symptom's fix.",inputSchema:{type:"object",properties:{category:{type:"string",enum:["typography","color-surface","layout","interactivity","content","components","iconography","code-quality","omissions"]}}}},{name:"list_audit_rules",description:"List the LOCAL static ui-audit rules (scripts/ui-audit.mjs) to run BEFORE any visual review \u2014 each cites the standard it enforces (WCAG/WAI-ARIA/Intl/ISO/IANA/CSS-Logical) + a fix + the run command. Optionally by category.",inputSchema:{type:"object",properties:{category:{type:"string",enum:["tokens","composition","api","a11y","i18n","rtl","copy"]}}}},{name:"list_visual_checks",description:"List the RUNTIME visual-audit checks (scripts/visual-audit.mjs \u2014 Playwright + axe-core) to run against the RUNNING app: contrast/ARIA (axe), target size, rendered-accent chroma, DOM emoji, banner layout. Needs a browser (vs list_audit_rules, static). Optionally by category.",inputSchema:{type:"object",properties:{category:{type:"string",enum:["a11y","color","i18n","layout"]}}}},{name:"get_anti_ai_tell",description:"Fetch ONE anti-AI-tell \u2014 full body + concrete fix. Use after `list_anti_ai_tells`.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Exact tell name from list_anti_ai_tells."}},required:["name"]}},{name:"get_redesign_check",description:"Fetch redesign check(s) matching a symptom snippet. Returns full fix + UI note. Use after `list_redesign_checks`.",inputSchema:{type:"object",properties:{symptom:{type:"string",description:"Fragment of the symptom text (e.g. 'Inter everywhere' / '100vh')."}},required:["symptom"]}},{name:"get_skill_section",description:"Fetch ONE section of ONE skill \u2014 token-efficient. E.g. `skill='soft', section='double-bezel'`. Use after `list_skills` narrowed the relevant skill + section.",inputSchema:{type:"object",properties:{skill:{type:"string",description:"Skill id (e.g. 'soft', 'minimalist', 'taste')."},section:{type:"string",description:"Section id within that skill."}},required:["skill","section"]}},{name:"get_component",description:"Full guide for one @godxjp/ui component \u2014 import path, props/types/defaults, HOW to use it (DO/DON'T), WHEN to reach for it (use cases), related components (don't reinvent/confuse), a copy-paste example, story path, and cardinal rules. Use this before hand-rolling anything. Design-token knobs are listed compactly (name+default); pass `verbose:true` for what each token controls.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Component name (e.g. 'Button', 'DataTable')."},verbose:{type:"boolean",description:"Include the full design-token table with a 'what it controls' description per token. Default false (compact token+default only) to save context."}},required:["name"]}},{name:"get_pattern",description:"Full code snippet for one canonical pattern \u2014 copy-paste-ready.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Pattern slug (use list_patterns first)."}},required:["name"]}},{name:"get_rule",description:"Read one cardinal rule from CLAUDE.md (by number) OR all if no number.",inputSchema:{type:"object",properties:{number:{type:"number",description:"Rule number (1-N)."}}}},{name:"get_vocab",description:"Read shared prop-vocabulary type (`SizeProp`, `StatusProp`, `ColorProp`, `LoadingProp`, etc.) OR all if no name.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Vocab type name."}}}},{name:"get_tokens",description:"Read design tokens, optionally filtered by tier category (primitive / semantic / component).",inputSchema:{type:"object",properties:{category:{type:"string",enum:["primitive","semantic","component"]}}}},{name:"list_consumer_skills",description:"List the design skills relevant to an app-dev BUILDING WITH @godxjp/ui (audience consumer/both). Hides core library-maintenance skills. START HERE if you import @godxjp/ui and want guidance (design-to-page, compose-a-screen, taste, \u2026). Returns id + name + whenToUse + section ids.",inputSchema:{type:"object",properties:{}}},{name:"get_consumer_skill",description:"Fetch ONE section of ONE consumer-facing skill. Same as get_skill_section but refuses core-only skills (steers app-devs away from library-maintenance material). Use after list_consumer_skills / route_consumer_task.",inputSchema:{type:"object",properties:{skill:{type:"string",description:"Consumer skill id (e.g. 'design-to-page', 'compose-a-screen')."},section:{type:"string",description:"Section id within that skill."}},required:["skill"]}},{name:"route_consumer_task",description:"Natural-language task \u2192 consumer skill+section pointer. Like route_task but only points to consumer-facing skills (never core library-maintenance). Use FIRST when you're building an app with @godxjp/ui.",inputSchema:{type:"object",properties:{task:{type:"string",description:"Describe what you want to build."}},required:["task"]}},{name:"draft_bug_report",description:"When @godxjp/ui ITSELF is at fault (missing token, a primitive lacking the controlled-vocabulary prop, a real a11y/behaviour bug, a wrong catalog example) and you cannot follow a rule \u2014 DON'T fake a workaround. This drafts a detailed GitHub issue body + a copy-paste `gh issue create` command so you can report it. Prints the command only; never runs gh.",inputSchema:{type:"object",properties:{summary:{type:"string",description:"One-line title of the bug / blocked rule."},repro:{type:"string",description:"Minimal steps or code to reproduce."},expected:{type:"string",description:"What SHOULD happen (per the rule/spec)."},actual:{type:"string",description:"What actually happens."},component:{type:"string",description:"Affected component name, if any (links to get_component)."},rule:{type:"number",description:"Cardinal rule number that can't be followed, if any."},version:{type:"string",description:"Installed @godxjp/ui version (e.g. '12.1.0')."},env:{type:"string",description:"Environment (browser/OS/framework), if relevant."}},required:["summary"]}},{name:"check_compatibility",description:"Report whether the @godxjp/ui version installed in the target project matches THIS catalog (which describes one release train). A mismatched minor means the props/tokens/patterns may describe a build they never installed (#140). Pass the installed version (`npm ls @godxjp/ui`); call it at the START of a consumer session.",inputSchema:{type:"object",properties:{version:{type:"string",description:"Installed @godxjp/ui version in the target project, e.g. '16.10.0'. Omit to just read the catalog's own version + compatible range."}}}},{name:"route_task",description:"Natural-language task \u2192 skill+section pointer (e.g. 'design a premium agency hero' \u2192 soft/vibe-archetypes). Use FIRST when you don't know which skill applies.",inputSchema:{type:"object",properties:{task:{type:"string",description:"Describe what you want to build."}},required:["task"]}},{name:"suggest_primitive",description:"Use case \u2192 primitive recommendation. E.g. 'confirm a destructive delete' \u2192 DangerZone pattern + Dialog suggestion.",inputSchema:{type:"object",properties:{use_case:{type:"string"}},required:["use_case"]}},{name:"search_components",description:"Fuzzy-search primitives by name / tagline / prop. Returns ranked matches.",inputSchema:{type:"object",properties:{query:{type:"string"}},required:["query"]}},{name:"get_frame_coverage",description:"Verified preview-contract coverage for a component (issue #163). Answers 'is this state actually PROVEN?' \u2014 returns, per contract dimension (variants, tones, sizes, shapes, density, controlled/uncontrolled ownership, disabled/read-only/loading/empty/error/success, async retry/cancel/offline, responsive viewport matrix, RTL, long/localized content, keyboard/focus, accessible name/description/error, reduced motion / coarse touch), whether an EXECUTED case proves it (covered), whether nothing proves it (UNTESTED), or whether it cannot exist (not-applicable, with a reason). UNTESTED IS NOT A PASS: never infer that a component supports a state because an example renders. Call this before telling a user a component 'supports' anything. Omit `name` for the repo-wide summary and the tracked known gaps.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Public export name (e.g. 'Button', 'DataTable', 'CardFooter'). Omit for the repo-wide coverage summary."}}}},{name:"lint_jsx",description:"Heuristic check of a JSX snippet for common violations \u2014 raw `<button>` / `<input>`, `color='error'` on Tag/Badge, missing aria-label, missing source.code override on stories with cell renderers (rule 34), etc.",inputSchema:{type:"object",properties:{jsx:{type:"string"}},required:["jsx"]}}],Ie=new Set(H.map(e=>e.name));function ze(e=V()){let t=h.godxUiCompatibility??h.version,a=`@godxjp/ui-mcp ${h.version} (catalog for @godxjp/ui ${t})`;if(!e)return a;let o=e.source==="node_modules"?"read from node_modules at answer time":"from GODX_UI_VERSION at launch \u2014 node_modules/@godxjp/ui not resolved";return`${a} \u2014 installed @godxjp/ui ${e.version} (${o})`}function Pe(e=V()){let t=e?L(e.version):null,a=L(h.version);return!e||!t||!a?null:Ue(t,a)>0?`\u26A0\uFE0F SERVER OLDER THAN INSTALLED PACKAGE: this server is @godxjp/ui-mcp ${h.version}, the project has @godxjp/ui ${e.version} installed \u2014 this catalog is BEHIND the package and may be missing props and components that exist. Do not conclude from this answer that a prop is unavailable. Restart the session so the server relaunches on the installed version (run \`npx @godxjp/ui sync-rules\` first if the project's .mcp.json still pins an older @godxjp/ui-mcp).`:t.major===a.major?null:`\u26A0\uFE0F MAJOR MISMATCH: this server is @godxjp/ui-mcp ${h.version}, the project has @godxjp/ui ${e.version} installed \u2014 this catalog may describe components that do not exist in the installed package. Pin the MCP to @godxjp/ui-mcp@${e.version} (\`npx @godxjp/ui sync-rules\` updates the project's .mcp.json; a registration outside the project needs \`claude mcp remove <key>\`), then restart the agent.`}async function me(e,t){let a=await Le(e,t);if(!Ie.has(e))return a;let o=V(),n=Pe(o);return`${ze(o)}
+finding and needs no suppression.`,oe=[{id:"dialog-needs-body",severity:"error",category:"composition",standard:null,fix:"Wrap a Dialog/Sheet's middle in <DialogBody>/<SheetBody>. The scroll lives on the body \u2014 the content box is `overflow: hidden` with no max-height \u2014 so an overlay without one clips long content at BOTH ends and takes the footer's buttons with it, leaving Escape as the only way out. It only shows on real data, never on demo data (gh#617)."},{id:"no-utility-spacing",severity:"error",category:"composition",standard:null,fix:"Remove gap-*/p-*/m-* from your own markup; space siblings with <Flex gap> / <ResponsiveGrid>. Page sections are spaced by <PageContainer> (docs/CONSUMER-RULES.md \xA73)."},{id:"no-utility-layout",severity:"error",category:"composition",standard:null,fix:'Replace className="flex \u2026" / "grid \u2026" with <Flex> (row), <Flex direction="col"> (stack) or <ResponsiveGrid columns>.'},{id:"no-hand-rolled-surface",severity:"warn",category:"composition",standard:null,fix:"A rounded+border/bg div is a fake surface \u2014 use Card, Badge, Avatar, ListRow, Descriptions or EmptyState so height, padding and radius come from tokens. A read-only sample of a colour a USER chose is Swatch, which takes that value as a prop (gh#527)."},{id:"sibling-cards-need-flex",severity:"warn",category:"composition",standard:null,fix:'Wrap adjacent <Card>s in <Flex direction="col" gap="lg"> or <ResponsiveGrid>; direct children of PageContainer are spaced by the page already.'},{id:"no-raw-palette-color",severity:"error",category:"tokens",standard:null,fix:"Use semantic tokens (bg-primary, text-muted-foreground), never raw palette (bg-blue-500)."},{id:"no-arbitrary-hex",severity:"error",category:"tokens",standard:null,fix:"No hardcoded hex in className; read design-system color tokens."},{id:"no-arbitrary-spacing",severity:"error",category:"tokens",standard:null,fix:"No p-[13px]/gap-[7px]; use the token scale / <Flex gap> / <PageContainer>."},{id:"no-arbitrary-size",severity:"error",category:"tokens",standard:null,fix:"No w-[37px]/h-[260px]; use token sizes or a sizing prop (min-w-[\u2026] allowed)."},{id:"no-arbitrary-typography",severity:"error",category:"tokens",standard:null,fix:"No text-[20px]/leading-[1.7]; use the golden-ratio type-scale tokens."},{id:"no-arbitrary-radius",severity:"error",category:"tokens",standard:null,fix:"No rounded-[6px]; use rounded-sm/md/lg radius tokens."},{id:"no-off-scale-token-value",severity:"warn",category:"tokens",standard:null,fix:"A design-system knob you override takes a step (style={{ '--card-space-inset': 'var(--space-4)' }}) or a calc() from one (calc(var(--space-4) + 2px)), not a raw 13px. Only axes that HAVE a scale count: space/padding/gap/margin, font-size, radius, icon-size (width/height/size/offset have none yet, so a number there is fine). A value that is genuinely off the grid keeps its literal and says why in place, with a /* scale-exempt: 6px status dot, below --space-1 */ comment on that line or the one above."},{id:"no-dark-color-override",severity:"warn",category:"tokens",standard:null,fix:"Drop dark: color overrides \u2014 semantic tokens already adapt."},{id:"raw-white-black",severity:"warn",category:"tokens",standard:null,fix:"Prefer semantic tokens (text-primary-foreground, bg-background) over raw white/black."},{id:"no-domain-tracking-token",severity:"error",category:"tokens",standard:null,fix:"No package-tracking/domain tokens; use semantic tokens or app theme overrides."},{id:"no-space-xy",severity:"error",category:"tokens",standard:null,fix:"Use <Flex gap> instead of space-x/y-*."},{id:"no-raw-select",severity:"error",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use <Select> from @godxjp/ui, not a raw <select>."},{id:"no-raw-table",severity:"error",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use the <Table>/<DataTable> family, not a raw <table>."},{id:"no-raw-input",severity:"error",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use <Input> from @godxjp/ui, not a raw <input>."},{id:"no-raw-textarea",severity:"warn",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use <Textarea> from @godxjp/ui, not a raw <textarea>."},{id:"no-raw-button",severity:"error",category:"composition",standard:"HTML Living Standard (WHATWG)",fix:"Use <Button> from @godxjp/ui, not a raw <button>."},{id:"card-manual-padding",severity:"error",category:"composition",standard:null,fix:"Wrap the body in <CardContent>; don't hand-roll padding on <Card>."},{id:"card-needs-content",severity:"error",category:"composition",standard:null,fix:"<Card> body must be in <CardContent> (no padding otherwise); flush only for a full-bleed table."},{id:"bare-control-needs-formfield",severity:"warn",category:"composition",standard:"WCAG 2.2 SC 1.3.1 \xB7 3.3.2 \xB7 @godxjp/ui FormField (cardinal rule 227)",fix:"Wrap a labelled control in <FormField label=\u2026> \u2014 it owns label\u2194control id wiring, aria/error, AND the field rhythm; never pair a bare <Label> with an <Input>."},{id:"formfield-needs-form",severity:"error",category:"composition",standard:"@godxjp/ui Form (gh#998)",fix:'Wrap FormFields in <Form layout="horizontal" labelWidth controlWidth>; a row of fields is <SpaceCompact> or <Form columns>, never a hand-rolled <Flex>. A field component whose whole output is one FormField is exempt.'},{id:"mixed-button-size",severity:"error",category:"composition",standard:null,fix:'Sibling <Button>s under one parent (through fragments, {cond && \u2026}, ternaries, Tooltip wrappers) share ONE size; a missing size is default; icon-sm pairs with sm, icon-xs with xs, icon with default. Never `size="sm"` beside a default Button in one action row.'},{id:"dialog-form-too-big",severity:"error",category:"composition",standard:"@godxjp/ui form placement (gh#998)",fix:"Three or more FormFields in a Dialog body is a page: give the form its own route. Dialogs hold a confirmation or one or two fields; a side Sheet (drawer) may hold a filter or edit form."},{id:"select-width-hint",severity:"warn",category:"composition",standard:"GOV.UK Design System \xB7 text input width",fix:"Size a Select for its content \u2014 `controlWidth` on the FormField, or once on the <Form>."},{id:"manual-field-error",severity:"warn",category:"composition",standard:"WCAG 2.2 SC 3.3.1",fix:"Use <FormField error=\u2026>, not a hand-rolled <p class='text-destructive'>."},{id:"manual-field-helper",severity:"warn",category:"composition",standard:null,fix:"Use <FormField helper=\u2026>, not a hand-rolled helper <p>."},{id:"status-tone-not-variant",severity:"error",category:"api",standard:null,fix:"Badge/Tag/StatCard status uses tone, not variant (variant is structural)."},{id:"value-callback-on-value-change",severity:"error",category:"api",standard:null,fix:"Abstract value components use onValueChange, not onChange."},{id:"icon-button-needs-name",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 4.1.2 \xB7 1.1.1 \xB7 WAI-ARIA 1.2 \xB7 Accessible Name Computation 1.2",fix:"Name <Button size='icon'> with aria-label={t('\u2026')} OR from content \u2014 a <VisuallyHidden>/sr-only child beside the aria-hidden glyph. Text inside an aria-hidden subtree names nothing."},{id:"img-needs-alt",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 1.1.1 \xB7 HTML Living Standard",fix:"Add alt to every <img> (alt='' if decorative); prefer <Avatar>/<AspectRatio>."},{id:"no-positive-tabindex",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 2.4.3 \xB7 WAI-ARIA APG",fix:"Use tabIndex 0 or -1 only; never positive \u2014 it breaks focus order."},{id:"hand-rolled-close-glyph",severity:"warn",category:"a11y",standard:"WAI-ARIA 1.2 (dialog) \xB7 WCAG 2.2 SC 4.1.2",fix:"Pass onDismiss to <Alert>, or use <Dialog>/<Sheet>'s built-in labelled close \u2014 not a bare \u2715."},{id:"no-hand-rolled-scrollport",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 2.1.1 (Keyboard) \xB7 WAI-ARIA 1.2 (group) \xB7 Deque axe-core scrollable-region-focusable",fix:'Replace className="overflow-auto / overflow-y-auto / overflow-x-auto / overflow-scroll" on your own element with <ScrollArea label={t("\u2026")} orientation>, which is the tab stop, the role and the localized name \u2014 and withholds all three while there is nothing to scroll. A browser audit only fails a scrollport whose content has NO focusable child, so the same markup is clean or broken depending on the data; this reads the markup instead (gh#825). overflow-hidden is a clipping box, not a scrollport, and is not flagged.'},{id:"no-emoji-in-ui",severity:"warn",category:"i18n",standard:"Unicode UTS #51 \xB7 WCAG 2.2 SC 1.1.1",fix:"No emoji in product UI; quiet i18n copy + Lucide icon + Badge tone."},{id:"no-emoji-flag",severity:"warn",category:"i18n",standard:"ISO 3166-1 \xB7 ECMA-402 Intl.DisplayNames \xB7 Unicode UTS #51",fix:"Derive country names from Intl.DisplayNames; no emoji flags."},{id:"hardcoded-currency",severity:"warn",category:"i18n",standard:"ISO 4217 \xB7 ECMA-402 Intl.NumberFormat",fix:"Format money with Intl.NumberFormat({ style: 'currency', currency }), not \xA5{amount}."},{id:"raw-intl-date",severity:"warn",category:"i18n",standard:"ISO 8601 \xB7 IANA tz \xB7 ECMA-402 Intl.DateTimeFormat",fix:"Use formatDate from @godxjp/ui/datetime, not hand-built or locale-default dates."},{id:"no-physical-direction",severity:"warn",category:"rtl",standard:"W3C CSS Logical Properties L1 \xB7 WCAG 2.2 (1.3.2)",fix:"Use logical utilities (ms-/me-/ps-/pe-, start-/end-, text-start/end, border-s/e, rounded-s/e)."},{id:"no-em-dash-in-copy",severity:"warn",category:"copy",standard:"@godxjp/ui reference-design typography",fix:"No em-dash (\u2014) in copy; use a middot \xB7 or two calm sentences."},{id:"lucide-icon-needs-size",severity:"warn",category:"composition",standard:"WCAG 2.2 SC 1.4.4 \xB7 @godxjp/ui icon scale (--icon-size-*)",fix:'A lucide glyph outside a sizing context draws at its intrinsic 24px. Render it as <Icon as={Lock} size="sm" tone="muted" /> \u2014 the primitive puts it on the --icon-size-* scale and is aria-hidden unless you pass a label.'},{id:"no-hand-rolled-list",severity:"warn",category:"composition",standard:"WAI-ARIA 1.2 (list / listitem) \xB7 HTML Living Standard (ul/ol/li) \xB7 WCAG 2.2 SC 1.3.1",fix:'Build the list as <Flex as="ul" marker="none" direction="col" gap="none"> with <ListRow as="li"> rows \u2014 not a raw <ul>/<ol> (no gap token), not <div role="list">/<div role="listitem">, and never a wrapper around each row: the divider is :not(:last-child) among SIBLINGS, so a row alone in its own wrapper loses it silently (a consumer lost every divider in a settings menu and a dashboard this way). marker="none" keeps the element, the <li> semantics and the gap, and drops the bullet and the --space-5 indent (gh#714). A deliberate exception \u2014 a drag-and-drop Kanban column, an evidence list inside a TableCell \u2014 takes an ui-audit-disable-line that says so.'},{id:"no-hand-rolled-break-anywhere",severity:"warn",category:"composition",standard:"CSS Text 3 \xA75.5 (overflow-wrap) \xB7 WCAG 2.2 SC 1.4.10 (Reflow)",fix:`Replace className="[overflow-wrap:anywhere] break-words whitespace-normal" (or wrap-anywhere) with <Text break="anywhere">, which emits overflow-wrap: anywhere AND releases a table cell's inherited nowrap, so an email, code or id shrinks its column to the viewport. Not whitespace="pre-wrap": its break-word does not lower min-content, so a table cell stays wide (gh#927).`}];function re(e){return e?oe.filter(t=>t.category===e):oe}var le="node node_modules/@godxjp/ui/scripts/visual-audit.mjs <baseUrl> [route \u2026]  (optional peers, TESTED range: playwright >=1.55 <2 [1.61.1] + @axe-core/playwright >=4.10 <5 [4.12.1] + axe-core >=4.10 <5 [4.12.1] + a chromium via `playwright install chromium`; --strict for a CI gate, --format json ALWAYS emits valid JSON with a status of ok|partial|error separating infra errors[] from product findings[], --rules to print this catalog)",se=[{id:"css-layers-missing",severity:"error",category:"layout",standard:"@godxjp/ui styles contract (styles / styles/core are the only entries)",fix:"Import `@godxjp/ui/styles` (or `styles/core` without fonts \u2014 86 KB instead of 367 KB gzip, since the bundled @font-face declarations are most of the CSS, gh#971); never cherry-pick *-layout.css \u2014 a missing layer renders naked menus and unsized Select rows."},{id:"control-height-mismatch",severity:"error",category:"layout",standard:"@godxjp/ui control tier (--control-height) \xB7 Nielsen consistency heuristic",fix:"Every control in one row must share --control-height; replace hand-rolled pills with Avatar/Button/Badge, never restyle a control's height."},{id:"mixed-button-height",severity:"error",category:"layout",standard:"@godxjp/ui Button size (one size per row) \xB7 Nielsen consistency heuristic",fix:"Buttons in one flex row must render at one height (within 0.5px): one `size` per row; icon-sm pairs with sm, icon-xs with xs, icon with default. Runtime twin of the static mixed-button-size rule."},{id:"sibling-card-gap",severity:"error",category:"layout",standard:"@godxjp/ui spacing scale (docs/SPACING.md)",fix:'Adjacent Cards need one space step between them \u2014 <Flex direction="col" gap>, <ResponsiveGrid>, or direct children of PageContainer.'},{id:"row-content-starved",severity:"warn",category:"layout",standard:"WCAG 2.2 SC 1.4.10 reflow",fix:`A sibling (a w-full SelectTrigger) takes the row's width and truncates its neighbours \u2014 give the Select width="auto" or move it out of the row.`},{id:"axe-violations",severity:"warn",category:"a11y",standard:"WCAG 2.2 A/AA \xB7 WAI-ARIA 1.2 (axe-core engine)",fix:"Fix each axe node \u2014 contrast (1.4.3), name/role/value (4.1.2), ARIA, landmarks. Runs on the REAL DOM, catching what static analysis cannot."},{id:"target-size-min",severity:"warn",category:"a11y",standard:"WCAG 2.2 SC 2.5.8 (24\xD724 AA) \xB7 2.5.5 (44\xD744 AAA)",fix:"Interactive targets must be \u226524\xD724 CSS px; size from the --control-height tier."},{id:"oversaturated-accent",severity:"warn",category:"color",standard:"@godxjp/ui reference-design \u6E0B\u307F (OKLCH chroma \u2264 0.18)",fix:"Desaturate brand/primary surfaces (OKLCH chroma \u2264 0.18); read --primary tokens, no raw vivid bars. The accent @godxjp/ui itself ships is exempt (gh#823) \u2014 this finding is always a colour someone chose."},{id:"emoji-rendered",severity:"warn",category:"i18n",standard:"Unicode UTS #51 \xB7 WCAG 2.2 SC 1.1.1",fix:"Remove emoji from rendered product text; quiet i18n copy + Lucide icon + Badge tone."},{id:"alert-controls-misplaced",severity:"warn",category:"layout",standard:"@godxjp/ui Alert anatomy \xB7 WAI-ARIA 1.2 \xB7 WCAG 2.2 SC 4.1.2",fix:"Use <Alert>: one leading tone icon, <Alert.Actions> trailing-right normal width, onDismiss \xD7 top-right, one horizontal row."}];function de(e){return e?se.filter(t=>t.category===e):se}var h={name:"@godxjp/ui-mcp",version:"31.26.0",godxUiCompatibility:"31.26.x",description:"Model Context Protocol server for @godxjp/ui \u2014 gives Claude Code / Codex CLI / Cursor / any MCP-aware agent live access to the component catalog, prop vocabulary, design tokens, 45 cardinal rules, copy-paste-ready patterns, 12 design / taste skills synthesised from Leonxlnx/taste-skill, 20+ anti-AI-tell patterns, and a 50-check redesign audit \u2014 token-efficient (list \u2192 drill-down).",type:"module",main:"./dist/index.js",module:"./dist/index.js",types:"./dist/index.d.ts",bin:{"godx-ui-mcp":"./dist/index.js"},files:["dist","README.md"],publishConfig:{registry:"https://registry.npmjs.org/",access:"public"},repository:{type:"git",url:"git+https://github.com/godx-jp/godxjp-ui.git",directory:"mcp"},homepage:"https://github.com/godx-jp/godxjp-ui/tree/main/mcp#readme",license:"Apache-2.0",scripts:{build:"tsup",dev:"tsup --watch",start:"node dist/index.js",inspect:"npx @modelcontextprotocol/inspector node dist/index.js","type-check":"tsc --noEmit",test:"vitest run",prepublishOnly:"npm run build"},dependencies:{"@modelcontextprotocol/sdk":"^1.29.0",zod:"^4.4.3"},devDependencies:{"@types/node":"^22.10.0",tsup:"^8.5.1",typescript:"^6.0.3",vitest:"^4.1.6"},keywords:["mcp","model-context-protocol","godxjp","ui","design-system","react","claude","cursor"],author:"GoDX (https://godx.jp)",bugs:{url:"https://github.com/godx-jp/godxjp-ui/issues"}};var H=[{name:"list_skills",description:"List every design/taste skill bundled by this MCP (id + name + whenToUse + section ids). Use FIRST to discover skills; then `get_skill_section` to drill in.",inputSchema:{type:"object",properties:{}}},{name:"list_primitives",description:"List every @godxjp/ui primitive/composite/shell (group + tagline per entry). Optionally filter by group. Then `get_component` for one's full API.",inputSchema:{type:"object",properties:{group:{type:"string",enum:["general","layout","data-display","data-entry","feedback","navigation","composites","shell","providers"]}}}},{name:"list_utilities",description:'List every NON-component public export of @godxjp/ui \u2014 hooks, helper functions and constants (cn, formatDate, formatCurrency, toast, useDebouncedValue, buttonVariants, CHART_COLORS, SHOW_PARENT \u2026). Reach for this before hand-writing a className merger, a date/money formatter, a debounce hook or a chart palette: two products in this org each re-implemented `cn` because it could not be found. Optionally filter by kind. Then `get_component name="<name>"` for its signature, usage and example.',inputSchema:{type:"object",properties:{kind:{type:"string",enum:["hook","function","value"],description:"hook = only legal inside a component body; function = callable anywhere; value = a constant to read."}}}},{name:"list_patterns",description:"List every canonical copy-paste code pattern (signup-form, settings-page, data-table-page, async-data-state, confirm-destructive, \u2026); common aliases resolve too. Use before `get_pattern`.",inputSchema:{type:"object",properties:{}}},{name:"list_anti_ai_tells",description:"List every AI-tell pattern to AVOID (optionally by category). Use to self-audit a design before shipping; then `get_anti_ai_tell` for the fix.",inputSchema:{type:"object",properties:{category:{type:"string",enum:["visual","layout","copy","interaction","imagery","structure"]}}}},{name:"list_redesign_checks",description:"List the redesign audit checklist (50+ checks; optionally by category). Use when auditing an existing project; then `get_redesign_check` for a symptom's fix.",inputSchema:{type:"object",properties:{category:{type:"string",enum:["typography","color-surface","layout","interactivity","content","components","iconography","code-quality","omissions"]}}}},{name:"list_audit_rules",description:"List the LOCAL static ui-audit rules (scripts/ui-audit.mjs) to run BEFORE any visual review \u2014 each cites the standard it enforces (WCAG/WAI-ARIA/Intl/ISO/IANA/CSS-Logical) + a fix + the run command. Optionally by category.",inputSchema:{type:"object",properties:{category:{type:"string",enum:["tokens","composition","api","a11y","i18n","rtl","copy"]}}}},{name:"list_visual_checks",description:"List the RUNTIME visual-audit checks (scripts/visual-audit.mjs \u2014 Playwright + axe-core) to run against the RUNNING app: contrast/ARIA (axe), target size, rendered-accent chroma, DOM emoji, banner layout. Needs a browser (vs list_audit_rules, static). Optionally by category.",inputSchema:{type:"object",properties:{category:{type:"string",enum:["a11y","color","i18n","layout"]}}}},{name:"get_anti_ai_tell",description:"Fetch ONE anti-AI-tell \u2014 full body + concrete fix. Use after `list_anti_ai_tells`.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Exact tell name from list_anti_ai_tells."}},required:["name"]}},{name:"get_redesign_check",description:"Fetch redesign check(s) matching a symptom snippet. Returns full fix + UI note. Use after `list_redesign_checks`.",inputSchema:{type:"object",properties:{symptom:{type:"string",description:"Fragment of the symptom text (e.g. 'Inter everywhere' / '100vh')."}},required:["symptom"]}},{name:"get_skill_section",description:"Fetch ONE section of ONE skill \u2014 token-efficient. E.g. `skill='soft', section='double-bezel'`. Use after `list_skills` narrowed the relevant skill + section.",inputSchema:{type:"object",properties:{skill:{type:"string",description:"Skill id (e.g. 'soft', 'minimalist', 'taste')."},section:{type:"string",description:"Section id within that skill."}},required:["skill","section"]}},{name:"get_component",description:"Full guide for one @godxjp/ui component \u2014 import path, props/types/defaults, HOW to use it (DO/DON'T), WHEN to reach for it (use cases), related components (don't reinvent/confuse), a copy-paste example, story path, and cardinal rules. Use this before hand-rolling anything. Design-token knobs are listed compactly (name+default); pass `verbose:true` for what each token controls.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Component name (e.g. 'Button', 'DataTable')."},verbose:{type:"boolean",description:"Include the full design-token table with a 'what it controls' description per token. Default false (compact token+default only) to save context."}},required:["name"]}},{name:"get_pattern",description:"Full code snippet for one canonical pattern \u2014 copy-paste-ready.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Pattern slug (use list_patterns first)."}},required:["name"]}},{name:"get_rule",description:"Read one cardinal rule from CLAUDE.md (by number) OR all if no number.",inputSchema:{type:"object",properties:{number:{type:"number",description:"Rule number (1-N)."}}}},{name:"get_vocab",description:"Read shared prop-vocabulary type (`SizeProp`, `StatusProp`, `ColorProp`, `LoadingProp`, etc.) OR all if no name.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Vocab type name."}}}},{name:"get_tokens",description:"Read design tokens, optionally filtered by tier category (primitive / semantic / component).",inputSchema:{type:"object",properties:{category:{type:"string",enum:["primitive","semantic","component"]}}}},{name:"list_consumer_skills",description:"List the design skills relevant to an app-dev BUILDING WITH @godxjp/ui (audience consumer/both). Hides core library-maintenance skills. START HERE if you import @godxjp/ui and want guidance (design-to-page, compose-a-screen, taste, \u2026). Returns id + name + whenToUse + section ids.",inputSchema:{type:"object",properties:{}}},{name:"get_consumer_skill",description:"Fetch ONE section of ONE consumer-facing skill. Same as get_skill_section but refuses core-only skills (steers app-devs away from library-maintenance material). Use after list_consumer_skills / route_consumer_task.",inputSchema:{type:"object",properties:{skill:{type:"string",description:"Consumer skill id (e.g. 'design-to-page', 'compose-a-screen')."},section:{type:"string",description:"Section id within that skill."}},required:["skill"]}},{name:"route_consumer_task",description:"Natural-language task \u2192 consumer skill+section pointer. Like route_task but only points to consumer-facing skills (never core library-maintenance). Use FIRST when you're building an app with @godxjp/ui.",inputSchema:{type:"object",properties:{task:{type:"string",description:"Describe what you want to build."}},required:["task"]}},{name:"draft_bug_report",description:"When @godxjp/ui ITSELF is at fault (missing token, a primitive lacking the controlled-vocabulary prop, a real a11y/behaviour bug, a wrong catalog example) and you cannot follow a rule \u2014 DON'T fake a workaround. This drafts a detailed GitHub issue body + a copy-paste `gh issue create` command so you can report it. Prints the command only; never runs gh.",inputSchema:{type:"object",properties:{summary:{type:"string",description:"One-line title of the bug / blocked rule."},repro:{type:"string",description:"Minimal steps or code to reproduce."},expected:{type:"string",description:"What SHOULD happen (per the rule/spec)."},actual:{type:"string",description:"What actually happens."},component:{type:"string",description:"Affected component name, if any (links to get_component)."},rule:{type:"number",description:"Cardinal rule number that can't be followed, if any."},version:{type:"string",description:"Installed @godxjp/ui version (e.g. '12.1.0')."},env:{type:"string",description:"Environment (browser/OS/framework), if relevant."}},required:["summary"]}},{name:"check_compatibility",description:"Report whether the @godxjp/ui version installed in the target project matches THIS catalog (which describes one release train). A mismatched minor means the props/tokens/patterns may describe a build they never installed (#140). Pass the installed version (`npm ls @godxjp/ui`); call it at the START of a consumer session.",inputSchema:{type:"object",properties:{version:{type:"string",description:"Installed @godxjp/ui version in the target project, e.g. '16.10.0'. Omit to just read the catalog's own version + compatible range."}}}},{name:"route_task",description:"Natural-language task \u2192 skill+section pointer (e.g. 'design a premium agency hero' \u2192 soft/vibe-archetypes). Use FIRST when you don't know which skill applies.",inputSchema:{type:"object",properties:{task:{type:"string",description:"Describe what you want to build."}},required:["task"]}},{name:"suggest_primitive",description:"Use case \u2192 primitive recommendation. E.g. 'confirm a destructive delete' \u2192 DangerZone pattern + Dialog suggestion.",inputSchema:{type:"object",properties:{use_case:{type:"string"}},required:["use_case"]}},{name:"search_components",description:"Fuzzy-search primitives by name / tagline / prop. Returns ranked matches.",inputSchema:{type:"object",properties:{query:{type:"string"}},required:["query"]}},{name:"get_frame_coverage",description:"Verified preview-contract coverage for a component (issue #163). Answers 'is this state actually PROVEN?' \u2014 returns, per contract dimension (variants, tones, sizes, shapes, density, controlled/uncontrolled ownership, disabled/read-only/loading/empty/error/success, async retry/cancel/offline, responsive viewport matrix, RTL, long/localized content, keyboard/focus, accessible name/description/error, reduced motion / coarse touch), whether an EXECUTED case proves it (covered), whether nothing proves it (UNTESTED), or whether it cannot exist (not-applicable, with a reason). UNTESTED IS NOT A PASS: never infer that a component supports a state because an example renders. Call this before telling a user a component 'supports' anything. Omit `name` for the repo-wide summary and the tracked known gaps.",inputSchema:{type:"object",properties:{name:{type:"string",description:"Public export name (e.g. 'Button', 'DataTable', 'CardFooter'). Omit for the repo-wide coverage summary."}}}},{name:"lint_jsx",description:"Heuristic check of a JSX snippet for common violations \u2014 raw `<button>` / `<input>`, `color='error'` on Tag/Badge, missing aria-label, missing source.code override on stories with cell renderers (rule 34), etc.",inputSchema:{type:"object",properties:{jsx:{type:"string"}},required:["jsx"]}}],Ie=new Set(H.map(e=>e.name));function ze(e=V()){let t=h.godxUiCompatibility??h.version,a=`@godxjp/ui-mcp ${h.version} (catalog for @godxjp/ui ${t})`;if(!e)return a;let o=e.source==="node_modules"?"read from node_modules at answer time":"from GODX_UI_VERSION at launch \u2014 node_modules/@godxjp/ui not resolved";return`${a} \u2014 installed @godxjp/ui ${e.version} (${o})`}function Pe(e=V()){let t=e?L(e.version):null,a=L(h.version);return!e||!t||!a?null:Ue(t,a)>0?`\u26A0\uFE0F SERVER OLDER THAN INSTALLED PACKAGE: this server is @godxjp/ui-mcp ${h.version}, the project has @godxjp/ui ${e.version} installed \u2014 this catalog is BEHIND the package and may be missing props and components that exist. Do not conclude from this answer that a prop is unavailable. Restart the session so the server relaunches on the installed version (run \`npx @godxjp/ui sync-rules\` first if the project's .mcp.json still pins an older @godxjp/ui-mcp).`:t.major===a.major?null:`\u26A0\uFE0F MAJOR MISMATCH: this server is @godxjp/ui-mcp ${h.version}, the project has @godxjp/ui ${e.version} installed \u2014 this catalog may describe components that do not exist in the installed package. Pin the MCP to @godxjp/ui-mcp@${e.version} (\`npx @godxjp/ui sync-rules\` updates the project's .mcp.json; a registration outside the project needs \`claude mcp remove <key>\`), then restart the agent.`}async function me(e,t){let a=await Le(e,t);if(!Ie.has(e))return a;let o=V(),n=Pe(o);return`${ze(o)}
 ${n?`${n}
 `:""}
 ${a}`}async function Le(e,t){switch(e){case"list_skills":return Fe();case"list_primitives":return ve(t.group);case"list_utilities":return et(t.kind);case"list_patterns":return qe();case"list_anti_ai_tells":return _e(t.category);case"list_redesign_checks":return $e(t.category);case"list_audit_rules":return Ke(t.category);case"list_visual_checks":return We(t.category);case"get_anti_ai_tell":return Ye(String(t.name??""));case"get_redesign_check":return Xe(String(t.symptom??""));case"get_skill_section":return ye(String(t.skill??""),String(t.section??""));case"get_component":return tt(String(t.name??""),t.verbose===!0);case"get_pattern":return nt(String(t.name??""));case"get_rule":return it(typeof t.number=="number"?t.number:void 0);case"get_vocab":return rt(t.name==null?void 0:String(t.name));case"get_tokens":return st(t.category);case"list_consumer_skills":return Me();case"get_consumer_skill":return Be(String(t.skill??""),String(t.section??""));case"route_consumer_task":return pe(String(t.task??""),{consumerOnly:!0});case"draft_bug_report":return He(t);case"check_compatibility":return fe(t.version==null?void 0:String(t.version));case"route_task":return pe(String(t.task??""));case"suggest_primitive":return lt(String(t.use_case??""));case"search_components":return dt(String(t.query??""));case"get_frame_coverage":return ot(t.name===void 0?void 0:String(t.name));case"lint_jsx":return ct(String(t.jsx??""));default:return`Unknown tool: ${e}`}}function Fe(){let e=`# Available skills (${T.length})