@cueplusplus/ui 0.15.0 → 0.17.0

package/manifest/components/theme-provider.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "Root of the theme system: stamps `data-theme`, `data-density` and `data-mode`\nso the token layer resolves, puts `data-font` on `<html>`, publishes\n`--cue-font-scale`, owns the persisted user preference, and publishes the\nregistry the three axis hooks read.\n\nRendering: `<div data-cue-root data-theme data-density data-mode style={{ colorScheme, --cue-font-scale }}>`\n(or the single child when `asChild`), plus `data-style` when — and only when —\na style set is in force. The `theme`/`density`/`font`/`mode`/`styleSet` props are\n*initial* values — the provider holds the state so `setTheme` and friends can\ndrive it — but a changed prop is adopted after mount, so a controlling parent\nstill works.\n\nThe font pairing is the one axis that never lands on this element: it has no\nisland form, `<html>` is its only home, and restating it here would shadow the\npre-paint stamp for the whole page on the first frame. See the `stamp` object\nbelow.\n\nPersistence and the pre-paint contract: setters write\n`{ theme, density, font, mode }` to `localStorage[storageKey]`, plus a `style`\nkey holding the style set when there is one — omitted entirely when there is\nnot, so an application that never touches that axis writes the same four-key\nobject it always wrote. That is exactly what\n{@link prepaintScript } reads to stamp `<html>` before the first paint. The\noutermost provider keeps `<html>` in sync while the app runs (and restores the\nprevious stamp on unmount) so the page ground, UA scrollbars and form controls\nfollow the theme; nested providers never touch `<html>`, and never own the\nfont pairing — `useTheme().font` and `setFont` inside one are the root's.",
+  "description": "Root of the theme system: stamps `data-theme`, `data-density` and `data-mode`\nso the token layer resolves, puts `data-font` on `<html>`, publishes\n`--cue-font-scale`, owns the persisted user preference, and publishes the\nregistry the three axis hooks read.\n\nRendering: `<div data-cue-root data-theme data-density data-mode style={{ colorScheme, --cue-font-scale }}>`\n(or the single child when `asChild`), plus `data-style` when — and only when —\na style set is in force, and `data-paint` on the same terms for a pack. The\n`theme`/`density`/`font`/`mode`/`styleSet`/`paint` props are\n*initial* values — the provider holds the state so `setTheme` and friends can\ndrive it — but a changed prop is adopted after mount, so a controlling parent\nstill works.\n\nA **nested** provider stamps only what it names. One that names no theme,\nrung, mode, set or pack follows each of them from around it, live — a\npreference the root restores after mount, or a setter called at the root,\nreaches it, its `useTheme()` and its portals — and restates none of them on\nits element, so inheritance carries the outer attributes through. Naming a\ntheme or a mode stamps theme, rung and mode together (a theme's light block\nand its rung rules are compound selectors), and restates the set and the pack\nin force beside them, so their blocks — whose values read the theme — resolve\nagainst this element's theme rather than the page's; naming only a rung\nstamps it as a `<Density>` island does.\n\nThe font pairing is the one axis that never lands on this element: it has no\nisland form, `<html>` is its only home, and restating it here would shadow the\npre-paint stamp for the whole page on the first frame. See the `stamp` object\nbelow.\n\nThe other axes wait for the same reason at a root that persists: its server\nmarkup, and its first client render, carry `data-cue-root` and no axis\nattribute or `color-scheme`, so the page inherits the visitor's stored axes\nfrom the pre-paint stamp on `<html>`. The restore lands before the first\npaint, and the element then states what it restored. Read the document's\naxes off `<html>`, not off this element, before hydration.\n\nPersistence and the pre-paint contract: setters write\n`{ theme, density, font, mode }` to `localStorage[storageKey]`, plus a `style`\nkey holding the style set when there is one and a `paint` key holding the pack\nwhen there is one — each omitted entirely when there is not, so an application\nthat never touches either axis writes the same four-key object it always\nwrote. That is exactly what\n{@link prepaintScript } reads to stamp `<html>` before the first paint. The\noutermost provider keeps `<html>` in sync while the app runs (and restores the\nprevious stamp on unmount) so the page ground, UA scrollbars and form controls\nfollow the theme; nested providers never touch `<html>`, and never own the\nfont pairing — `useTheme().font` and `setFont` inside one are the root's.",
   "props": [
     {
       "name": "themes",
@@ -22,7 +22,7 @@
       "type": "string",
       "required": false,
       "defaultValue": null,
-      "description": "Initial theme preset. Defaults to the first registered manifest's name, or\n`\"cue\"` with nothing registered. Changing it after mount adopts the new value.",
+      "description": "Initial theme preset. Defaults to the first registered manifest's name, or\n`\"cue\"` with nothing registered. Changing it after mount adopts the new value.\n\nA nested provider that names **none** holds none: it stamps no\n`data-theme`, so the theme around it inherits through its element, and\n`useTheme().theme` inside it — and every portal opened inside it — follows\nthat theme **live**, a theme the root restores from storage after mount\nincluded. Naming one makes it this provider's, stamped with the rung and\nmode in force beside it, whatever the root does.",
       "control": {
         "kind": "string"
       }
@@ -32,7 +32,7 @@
       "type": "\"normal\" | \"large\" | \"compact\" | \"ultra-compact\" | \"ultra-large\"",
       "required": false,
       "defaultValue": null,
-      "description": "Initial density level.\n\nDefaults to the rung the active theme's manifest names in\n`densities.default`, and to `\"compact\"` when it names none — spec §5's\nrule, and the same one `resolve()` applies when no rung is wanted, so a\ntheme opens on the rung it prefers whether it is read from JS or painted\nby its own stylesheet. Naming a rung here overrides that for every theme:\na consumer who named one named it deliberately.\n\nChanging it after mount adopts the new value; dropping it does not — a\nparent that stops naming a rung is not asking to move back to the theme's.",
+      "description": "Initial density level.\n\nDefaults to the rung the active theme's manifest names in\n`densities.default`, and to `\"compact\"` when it names none — spec §5's\nrule, and the same one `resolve()` applies when no rung is wanted, so a\ntheme opens on the rung it prefers whether it is read from JS or painted\nby its own stylesheet. Naming a rung here overrides that for every theme:\na consumer who named one named it deliberately.\n\nChanging it after mount adopts the new value; dropping it does not — a\nparent that stops naming a rung is not asking to move back to the theme's.\n\nA nested provider that names **none** follows the rung stamped around it\nlive — the outer provider's, or a `<Density>` island's between them — and\nstamps none unless it re-themes or re-modes, in which case it restates the\nrung it follows. Naming one stamps it as a `<Density>` island would.",
       "control": {
         "kind": "enum",
         "members": [
@@ -48,8 +48,8 @@
       "name": "mode",
       "type": "\"system\" | \"dark\" | \"light\"",
       "required": false,
-      "defaultValue": "dark",
-      "description": "Initial mode. Defaults to `\"dark\"`; `\"system\"` tracks `prefers-color-scheme`.",
+      "defaultValue": null,
+      "description": "Initial mode. Defaults to `\"dark\"` at the root; `\"system\"` tracks\n`prefers-color-scheme`.\n\nA nested provider that names **none** follows the mode around it live and\nstamps no `data-mode` or `color-scheme` of its own; `useTheme().mode` and\n`resolvedMode` inside it report the ambient pair. Naming one stamps it\nbeside the theme in force, because a theme's light block is the compound\n`[data-theme][data-mode]`.",
       "control": {
         "kind": "enum",
         "members": [
@@ -61,49 +61,67 @@
     },
     {
       "name": "font",
-      "type": "\"source\" | \"system\" | \"geist\" | \"inter\" | \"plex\" | \"roboto\" | \"apple\" | \"office\"",
+      "type": "\"source\" | \"system\" | \"geist\" | \"geist-mono\" | \"inter\" | \"plex\" | \"roboto\" | \"apple\" | \"office\" | \"inter-source\" | \"dm\" | \"calsans\"",
       "required": false,
       "defaultValue": null,
-      "description": "Initial font pairing.\n\nDefaults to the pairing the active theme's manifest names in\n`fontPairings.default` — §5's rule, the density prop's rule one axis over\n— and to `\"system\"` when it names none: the platform's own faces, nothing\ndownloaded, and the theme keeps whatever monospace it authored.\n\nA pairing that needs delivering is a set of *names*: this library ships no\nfont files, and a pairing nobody delivers falls through its stack to the\nplatform rather than failing. See `FONT_PAIRINGS[font].faces` for the\ncustom properties an app assigns to make one resolve.\n\n**Root-level only.** There is no font island: a nested provider forwards\nthis axis to the root, ignores this prop, and its `setFont` drives the root.\nA page that changed face halfway down is a page with a bug, and a specimen\nthat genuinely wants one — a picker row, a docs page showing all eight —\nneeds nothing from this library but `data-font` on a `<div>`.",
+      "description": "Initial font pairing.\n\nDefaults to the pairing the active theme's manifest names in\n`fontPairings.default` — §5's rule, the density prop's rule one axis over\n— and to `\"system\"` when it names none: the platform's own faces, nothing\ndownloaded, and the theme keeps whatever monospace it authored.\n\nA pairing that needs delivering is a set of *names*: this library ships no\nfont files, and a pairing nobody delivers falls through its stack to the\nplatform rather than failing. See `FONT_PAIRINGS[font].faces` for the\ncustom properties an app assigns to make one resolve.\n\n**Root-level only.** There is no font island: a nested provider forwards\nthis axis to the root, ignores this prop, and its `setFont` drives the root.\nA page that changed face halfway down is a page with a bug, and a specimen\nthat genuinely wants one — a picker row, a docs page showing all twelve —\nneeds nothing from this library but `data-font` on a `<div>`.",
       "control": {
         "kind": "enum",
         "members": [
           "source",
           "system",
           "geist",
+          "geist-mono",
           "inter",
           "plex",
           "roboto",
           "apple",
-          "office"
+          "office",
+          "inter-source",
+          "dm",
+          "calsans"
         ]
       }
     },
     {
       "name": "styleSet",
-      "type": "\"console\" | \"editorial\" | \"marketing\"",
+      "type": "\"console\" | \"editorial\" | \"marketing\" | \"graphite\" | \"tender\" | \"zine\" | \"kiln\" | \"porcelain\"",
       "required": false,
       "defaultValue": null,
-      "description": "Page composition for this subtree: `console`, `editorial` or `marketing`.\n\n**`styleSet`, not `style`.** This interface already has a\n`style?: React.CSSProperties` a few lines below, applied to the provider\nroot, and a second meaning for that name would be the one collision every\nconsumer of this component would have to think about. The DOM attribute is\n`data-style`, matching the four public axes — `data-cue-*` is this tree's\nprefix for *internal* attributes (`data-cue-theme`, `data-cue-fidelity`), and\na public axis wearing the internal prefix would be the more confusing of the\ntwo mistakes.\n\nUnset, **no attribute is stamped at all**, and that is the promise: an\napplication that has never heard of this axis renders the markup it rendered\nbefore it existed and stores the preference object it stored before it\nexisted. A style set is opt-in page composition, not a fourth thing every\npage has.\n\nLike the other three axes this is an *initial* value the provider then holds\nas state, so `setStyleSet` can drive it; a changed prop is adopted after\nmount. Unlike the font pairing it has an island form, so a nested provider\nholds its own rather than handing the axis up to the root.",
+      "description": "Page composition for this subtree: `console`, `editorial`, `marketing` or\n`graphite`.\n\n**`styleSet`, not `style`.** This interface already has a\n`style?: React.CSSProperties` a few lines below, applied to the provider\nroot, and a second meaning for that name would be the one collision every\nconsumer of this component would have to think about. The DOM attribute is\n`data-style`, matching the four public axes — `data-cue-*` is this tree's\nprefix for *internal* attributes (`data-cue-theme`, `data-cue-fidelity`), and\na public axis wearing the internal prefix would be the more confusing of the\ntwo mistakes.\n\nUnset, **no attribute is stamped at all**, and that is the promise: an\napplication that has never heard of this axis renders the markup it rendered\nbefore it existed and stores the preference object it stored before it\nexisted. A style set is opt-in page composition, not a fourth thing every\npage has.\n\nLike the other three axes this is an *initial* value the provider then holds\nas state, so `setStyleSet` can drive it; a changed prop is adopted after\nmount. Unlike the font pairing it has an island form, so a nested provider\nthat names a set holds its own rather than handing the axis up to the root.\n\nA nested provider that names **none** holds none: the set around it\ninherits through its element, and `useTheme().styleSet` inside it reports\nthat set **live** — a stored set the root restores after mount, or a later\n`setStyleSet` at the root, reaches it and its portals. If it names a\n`theme` or a `mode`, it also restates that set as `data-style` on its\nelement — still the page's set, followed live, never its own — because a\nset's block declares values that read the theme (a band's rule and\nground), and a custom property resolves where it is declared: restated,\nthey resolve against this island's theme instead of the page's.",
       "control": {
         "kind": "enum",
         "members": [
           "console",
           "editorial",
-          "marketing"
+          "marketing",
+          "graphite",
+          "tender",
+          "zine",
+          "kiln",
+          "porcelain"
         ]
       }
     },
     {
       "name": "paint",
-      "type": "\"none\"",
+      "type": "\"none\" | \"bevel\" | \"halo\" | \"hatch\" | \"lift\" | \"frost\" | \"grain\" | \"plume\" | \"matte\" | \"glaze\"",
       "required": false,
       "defaultValue": null,
-      "description": "A look pack for this subtree. Opt-in: a provider that names none stamps no\n`data-paint`, and a nested one inherits the pack stamped around it.",
+      "description": "A paint pack for this subtree. Opt-in: a provider that names none stamps no\n`data-paint` of its own. A nested one that names none follows the pack\nstamped around it **live**, through inheritance in the DOM and through\n`useTheme().paint` and its portals in React — and, if it names a `theme` or\na `mode`, restates that pack as `data-paint` on its element, so the pack's\nstrokes and inks (mixes of the theme's colours) resolve against this\nisland's theme rather than the page's. One that names a pack keeps it\nwhatever the root does.",
       "control": {
         "kind": "enum",
         "members": [
-          "none"
+          "none",
+          "bevel",
+          "halo",
+          "hatch",
+          "lift",
+          "frost",
+          "grain",
+          "plume",
+          "matte",
+          "glaze"
         ]
       }
     },
@@ -112,7 +130,7 @@
       "type": "number",
       "required": false,
       "defaultValue": "1",
-      "description": "Multiplier on every text token, published as `--cue-font-scale`. Defaults to `1`.",
+      "description": "Multiplier on every text token, published as `--cue-font-scale`. Defaults to `1`.\n\nAt a root that persists, pass the same number to\n`prepaintScript({ fontScale })`: until the root has restored the visitor's\npreferences, the type tokens the page reads are declared on `<html>`, and\nthe script is what puts the scale there for the first frame. The root keeps\nit on `<html>` after that.",
       "control": {
         "kind": "number"
       }
@@ -132,7 +150,7 @@
       "type": "TokenOverrides",
       "required": false,
       "defaultValue": null,
-      "description": "Typed token edits layered over the active theme: colours per mode, geometry\nper rung, and the three font stacks.\n\nFor the band of edits that sit below \"publish a theme package\": one accent\nfor a tenant, a stack the app already loads, a rung with two more pixels in\na touch build. Anything larger belongs in a `@cueplusplus/theme-<name>`\npackage, where a build measures it; anything smaller than this is a\n`!important` in a stray stylesheet, which outranks the token layer\neverywhere at once.\n\n**Colours and fonts are inline on this element**, so they inherit down the\nsubtree, beat every stylesheet without `!important`, and are re-stamped\nonto portal containers — which mount on `<body>` and inherit nothing from\nhere. They do not leak *out* of this provider: a nested provider's colour\nedit is scoped to its own subtree, and to portals opened from inside it.\n\n**Densities are one document-scoped `<style>` element**, because a rung is\nselected by attribute rather than inherited, and because\n`useControlHeight()`'s measuring probe hangs off `document.body`, where\na subtree-scoped rule would not reach it — leaving the measured height and\nthe painted control disagreeing by exactly the override. The consequence is\nworth knowing before you nest one: a nested provider's `densities` edit\nreaches the whole page, exactly as a theme's own rung rules do. Colours and\nfonts in the same object do not.\n\nAnd it cuts the other way as well, which is the half that surprises: two\nproviders editing the same rung produce two document-scoped rules of equal\nspecificity, so the **later** one in document order wins everywhere — and\nthe later one is the outer provider's, because a nested provider renders\ninside it. A nested `densities` edit does not merely leak out; an ancestor\nthat edits the same rung overrules it *inside the nested subtree too*. If\nan island needs geometry of its own, it needs a rung of its own — a name no\nancestor is editing — not the same rung with different numbers.\n\nIts rules are `[data-density=\"x\"][data-density=\"x\"]` — (0,2,0), tying a\ntheme's own `[data-theme=\"t\"] [data-density=\"x\"]` and winning on source\norder — so the precedence is: **`overrides`, then the configurator's\npersisted snapshot, then the theme, then base.**\n\n**A font override shadows the pairing for this subtree.** `data-font` is\nthe document's axis and this element deliberately never restates it (see\nthe note by `stamp` below), but `overrides.fonts` writes the resolved\n`--cue-font-*` properties directly, which is a stronger claim than the\nattribute and is the point: this is how an app says \"this product's face,\nwhatever pairing the visitor picked\".\n\nIn development the resulting palette is measured, and any required contrast\npair the edit broke — or made worse — is named on the console.",
+      "description": "Typed token edits layered over the active theme: colours per mode, geometry\nper rung, and the three font stacks.\n\nFor the band of edits that sit below \"publish a theme package\": one accent\nfor a tenant, a stack the app already loads, a rung with two more pixels in\na touch build. Anything larger belongs in a `@cueplusplus/theme-<name>`\npackage, where a build measures it; anything smaller than this is a\n`!important` in a stray stylesheet, which outranks the token layer\neverywhere at once.\n\n**Colours and fonts are inline on this element**, so they inherit down the\nsubtree, beat every stylesheet without `!important`, and are re-stamped\nonto portal containers — which mount on `<body>` and inherit nothing from\nhere. They do not leak *out* of this provider: a nested provider's colour\nedit is scoped to its own subtree, and to portals opened from inside it.\nUnder a root that persists, the server cannot know the visitor's mode, so\nuntil a root has restored, and until a nested provider whose mode is the\nroot's has mounted, the colours are instead one small `<style>` beside this\nelement, keyed on it and on `<html>`'s mode (and on `<html>`'s theme,\nwhere that decides the mode): the first frame is the visitor's mode with\nthat mode's edit, never the other mode's. It carries `nonce`; refused by a\npolicy, the edit waits for the mount.\n\n**Densities are one document-scoped `<style>` element**, because a rung is\nselected by attribute rather than inherited, and because\n`useControlHeight()`'s measuring probe hangs off `document.body`, where\na subtree-scoped rule would not reach it — leaving the measured height and\nthe painted control disagreeing by exactly the override. The consequence is\nworth knowing before you nest one: a nested provider's `densities` edit\nreaches the whole page, exactly as a theme's own rung rules do. Colours and\nfonts in the same object do not.\n\nAnd it cuts the other way as well, which is the half that surprises: two\nproviders editing the same rung produce two document-scoped rules of equal\nspecificity, so the **later** one in document order wins everywhere — and\nthe later one is the outer provider's, because a nested provider renders\ninside it. A nested `densities` edit does not merely leak out; an ancestor\nthat edits the same rung overrules it *inside the nested subtree too*. If\nan island needs geometry of its own, it needs a rung of its own — a name no\nancestor is editing — not the same rung with different numbers.\n\nIts rules are `[data-density=\"x\"][data-density=\"x\"]` — (0,2,0), tying a\ntheme's own `[data-theme=\"t\"] [data-density=\"x\"]` and winning on source\norder — so the precedence is: **`overrides`, then the configurator's\npersisted snapshot, then the theme, then base.**\n\n**A font override shadows the pairing for this subtree.** `data-font` is\nthe document's axis and this element deliberately never restates it (see\nthe note by `stamp` below), but `overrides.fonts` writes the resolved\n`--cue-font-*` properties directly, which is a stronger claim than the\nattribute and is the point: this is how an app says \"this product's face,\nwhatever pairing the visitor picked\".\n\nIn development the resulting palette is measured, and any required contrast\npair the edit broke — or made worse — is named on the console.",
       "control": {
         "kind": "opaque"
       }
@@ -142,7 +160,7 @@
       "type": "string",
       "required": false,
       "defaultValue": "cue-ui",
-      "description": "localStorage key holding `{ theme, density, font, mode }`. Defaults to `\"cue-ui\"`.\nOnly the outermost provider reads or writes it — a nested provider is an\nisland whose explicit props are the point, not a second preference store.",
+      "description": "localStorage key holding `{ theme, density, font, mode }`, plus `style` when a\nstyle set has been chosen and `paint` when a pack has — each omitted, never\nstored as `null`, when none has. Defaults to `\"cue-ui\"`.\nOnly the outermost provider reads or writes it — a nested provider is an\nisland whose explicit props are the point, not a second preference store.",
       "control": {
         "kind": "string"
       }
@@ -162,7 +180,7 @@
       "type": "string",
       "required": false,
       "defaultValue": null,
-      "description": "The Content-Security-Policy nonce for every `<style>` element this tree\nrenders — this library's and Base UI's.\n\nWhen `overrides.densities` is set this provider emits one `<style>`\nelement (see {@link ThemeProviderProps.overrides}). Under a policy of\n`style-src-elem 'self' 'nonce-<per-request>'` the browser refuses that\nelement on every page load, because an element React renders on the client\ncannot pick up a server nonce by itself. Pass the request's nonce here and\nit is set on the element.\n\nIt also reaches **Base UI**. Given a nonce, this provider renders\n`@base-ui/react`'s own `CSPProvider` around the tree, so the hoisted\n`<style>` that `ScrollAreaRoot` and `SelectPopup` emit carries it too.\nWithout that, a strict policy refuses it by content hash on every page\nrendering a Select, a Popover or a ScrollArea — and a consumer has no way\nto guess the remedy lives in a peer dependency's provider. An outer\n`CSPProvider` a consumer renders itself is left alone: no nonce here means\nno provider here, rather than one that overwrites theirs with `undefined`.\n\n`prepaintScript()` returns a *string* the application renders in a\n`<script>` of its own — so the application already controls that element's\nnonce, and between it and this prop a strict policy needs nothing else\nfrom here.\n\n**Pass this OR render your own `CSPProvider` — not both.** Base UI's\ncontext carries a second value beside the nonce, `disableStyleElements`,\nand its provider is the only public way to set either: the package exports\n`CSPProvider` and no hook, so a provider rendered here *replaces* an outer\none rather than extending it. Given a nonce this provider therefore sets\n`disableStyleElements` back to its default, and a consumer who had turned\nit on outside loses it silently — Base UI resumes emitting the very style\nelement they suppressed. An application already rendering its own\n`CSPProvider` needs nothing from this prop: leave it unset and the outer\ncontext survives untouched, which is the case\n`base-ui-nonce-outer-provider.test.tsx` pins.\n\n**A nonce cannot rescue a style ATTRIBUTE**, and this provider always sets\none on its root: `color-scheme` and `--cue-font-scale`, plus the font\nfamilies and overrides where they are given. CSP has no nonce form for\n`style-src-attr` — it is `'unsafe-inline'` or `'none'` — so an application\nserving `style-src-attr 'none'` loses those declarations, silently. That is\na policy decision rather than something this prop can change.",
+      "description": "The Content-Security-Policy nonce this provider hands on: to its own\ndensity-layer `<style>`, and — through Base UI's `CSPProvider` — to Base\nUI's scrollbar `<style>` and to the pre-hydration `<script>` a\n`<Slider thumbAlignment=\"edge\">` renders. List it in `script-src`, and in\nwhichever directive governs style elements: `style-src-elem` if the policy\nhas one, otherwise `style-src`. It does not reach `ThemeConfigurator`'s\n`<style>` or the application's pre-paint `<script>`.\n\nThe density layer — one `<style data-cue-overrides>` when\n`overrides.densities` yields a valid declaration (see\n{@link ThemeProviderProps.overrides}) — takes its nonce **from this prop\nalone**: not from an outer `CSPProvider`, and not from an outer\n`ThemeProvider`. A nested provider that sets its own `overrides.densities`\nneeds its own `nonce`. So does the colour layer — one `<style\ndata-cue-colors-for>` while `overrides.colors` waits on a mode that is\n`<html>`'s (see {@link ThemeProviderProps.overrides}); refused, the edit\napplies from the restore or the mount instead of the first frame.\n\nBase UI's scrollbar rule gets the nonce wherever React creates it in the\nbrowser. **It does not get it in server-rendered HTML** under a framework\nthat hands React a script-only nonce, which includes Next.js 16: React's\nserver renderer (19.2, and the canary Next.js 16 bundles) writes a\n`precedence` style's nonce only from its render option `nonce: { style }`.\nAllow that rule by hash, or turn on Base\nUI's `disableStyleElements` and ship the rule yourself;\n`docs/CONSUMING.md` §4.5 has both, with the hash.\n\n`prepaintScript()` returns a *string* the application renders in a\n`<script>` of its own, so put the same nonce on that element yourself.\n\n**An outer `CSPProvider` that sets `disableStyleElements` is switched off\ninside this provider once a nonce is given.** Base UI's `CSPProvider`\nbuilds its context from its own props alone, so the one rendered here\n*replaces* an outer one rather than extending it. Either leave this prop\nunset — only when no `overrides.densities` needs it and, wherever a\n`<Slider thumbAlignment=\"edge\">` renders, the outer provider carries the\nnonce — or render\n`<CSPProvider nonce={nonce} disableStyleElements>` again inside this\nprovider's children (with the nonce, or Base UI's pre-hydration script\nthere loses it), and again inside any nested provider given a nonce. An\napplication already rendering its own `CSPProvider` can leave this prop\nunset: Base UI's pre-hydration script takes the outer nonce, and so does\nits scrollbar rule wherever React creates it in the browser — the case\n`base-ui-nonce-outer-provider.test.tsx` pins — but the density layer then\nhas none.\n\n**A nonce cannot rescue a style ATTRIBUTE.** This provider's root always\ncarries one — `color-scheme` and `--cue-font-scale`, plus `fontFamilies`,\n`overrides.colors`, `overrides.fonts` and `style` where given — and many\ncomponents, and Base UI's form roots, render their own. A policy whose\n`style-src` (or, without one, `default-src`) does not allow all inline\nstyle — a nonce or a hash in it, or no `'unsafe-inline'` — therefore needs\nan explicit `style-src-attr 'unsafe-inline'`: a nonce or hash in the\ngoverning list makes the browser ignore `'unsafe-inline'`. The browser\nreports a refused attribute as a CSP violation; this library adds no\nwarning of its own.",
       "control": {
         "kind": "string"
       }
@@ -172,7 +190,7 @@
       "type": "boolean",
       "required": false,
       "defaultValue": "false",
-      "description": "Stamp the single child element instead of rendering a wrapper `<div>`.",
+      "description": "Stamp the single child element instead of rendering a wrapper `<div>`.\n\nA nested provider over a host element (`<section>`, `<main>`) behaves as\nits `<div>` would. Over a component it follows nothing from a persisting\nroot before it mounts: it stamps the root's theme, mode and density from\nthe server's first render, because the re-render that would correct them\nrenders the component again, and a `<Suspense>` boundary the component\ncreates would lose its streamed server HTML to it.",
       "control": {
         "kind": "boolean"
       }

package/manifest/components/thread-search.json

@@ -71,11 +71,13 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-radius-overlay",
     "--cue-radius-surface",
+    "--cue-style-focus-width",
     "--cue-surface-1",
     "--cue-text-body",
     "--cue-text-ui"

package/manifest/components/threshold-rail.json

@@ -187,10 +187,13 @@
     "--cue-danger",
     "--cue-danger-soft",
     "--cue-fg",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-info",
     "--cue-info-soft",
     "--cue-ok",
     "--cue-ok-soft",
+    "--cue-style-focus-width",
     "--cue-sunken",
     "--cue-warn",
     "--cue-warn-soft"

package/manifest/components/time-field.json

@@ -54,14 +54,28 @@
     "--cue-fg",
     "--cue-fg-subtle",
     "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-paint-rest-shade",
+    "--cue-paint-shadow-scale",
+    "--cue-paint-stroke-angle",
+    "--cue-paint-stroke-from",
+    "--cue-paint-stroke-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-control",
     "--cue-space-1",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
+    "--cue-style-body-weight",
+    "--cue-style-control-step-size",
+    "--cue-style-field-focus-offset",
+    "--cue-style-focus-edge",
+    "--cue-style-focus-width",
+    "--cue-style-input-face",
     "--cue-sunken",
     "--cue-text-body",
+    "--cue-text-emphasis",
     "--cue-text-label",
     "--cue-text-ui"
   ],

package/manifest/components/toast.json

@@ -75,25 +75,64 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
     "--cue-info",
     "--cue-leading-ui",
     "--cue-ok",
+    "--cue-paint-rim-width",
+    "--cue-paint-scrim-filter",
+    "--cue-paint-shade-far",
+    "--cue-paint-shade-hairline",
+    "--cue-paint-shade-near",
+    "--cue-paint-shadow-scale",
+    "--cue-paint-shadow-spread",
+    "--cue-paint-sheen-ink",
+    "--cue-paint-stroke-angle",
+    "--cue-paint-stroke-overlay-from",
+    "--cue-paint-stroke-overlay-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-control",
     "--cue-radius-overlay",
+    "--cue-radius-scale",
     "--cue-scrim",
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-6",
+    "--cue-style-body-face",
+    "--cue-style-body-leading",
+    "--cue-style-body-size",
+    "--cue-style-body-weight",
+    "--cue-style-control-face",
+    "--cue-style-display-variation",
+    "--cue-style-focus-width",
+    "--cue-style-heading-ink",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-ink",
+    "--cue-style-label-size",
+    "--cue-style-label-tracking",
+    "--cue-style-label-weight",
+    "--cue-style-menu-highlight",
+    "--cue-style-menu-item-radius",
+    "--cue-style-overlay-ground",
+    "--cue-style-overlay-title-leading",
+    "--cue-style-overlay-title-size",
+    "--cue-style-quiet-ink",
+    "--cue-style-title-face",
+    "--cue-style-title-weight",
     "--cue-surface-2",
     "--cue-text-emphasis",
     "--cue-text-label",
+    "--cue-text-micro",
     "--cue-text-ui",
     "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
     "--cue-tracking-caps-tight",
     "--cue-warn"
   ],

package/manifest/components/toggle-group.json

@@ -85,25 +85,7 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-border",
-    "--cue-border-strong",
-    "--cue-control-lg",
-    "--cue-control-md",
-    "--cue-control-sm",
-    "--cue-danger",
-    "--cue-fg",
-    "--cue-fg-subtle",
-    "--cue-focus",
-    "--cue-font-mono",
-    "--cue-radius-control",
-    "--cue-space-1",
-    "--cue-space-3",
-    "--cue-space-4",
-    "--cue-space-5",
-    "--cue-sunken",
-    "--cue-text-body",
-    "--cue-text-label",
-    "--cue-text-ui"
+    "--cue-space-1"
   ],
   "summary": "A cluster of toggles sharing one pressed state — and it may be empty.",
   "examples": [

package/manifest/components/toggle.json

@@ -88,16 +88,13 @@
   "tokensUsed": [
     "--cue-accent",
     "--cue-accent-soft",
-    "--cue-border",
-    "--cue-border-strong",
     "--cue-control-lg",
     "--cue-control-md",
     "--cue-control-sm",
-    "--cue-danger",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
@@ -105,7 +102,8 @@
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
-    "--cue-sunken",
+    "--cue-style-control-face",
+    "--cue-style-focus-width",
     "--cue-surface-2",
     "--cue-text-body",
     "--cue-text-label",

package/manifest/components/token-editor.json

@@ -87,9 +87,14 @@
     "--cue-font-sans",
     "--cue-space-2",
     "--cue-space-4",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-tracking",
     "--cue-text-label",
     "--cue-text-micro",
-    "--cue-tracking-caps"
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "The grouped colour rows — stateless by design.",
   "examples": [

package/manifest/components/tool-call-card.json

@@ -195,12 +195,13 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-border",
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-sm",
     "--cue-leading-ui",
@@ -210,9 +211,15 @@
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
+    "--cue-style-focus-width",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-tracking",
     "--cue-text-micro",
     "--cue-text-ui",
-    "--cue-tracking-caps"
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "The model's own tool call: name, risk chip, status in words, and the arguments and result behind a disclosure.",
   "examples": [

package/manifest/components/tool-call.json

@@ -107,14 +107,16 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-ok",
     "--cue-radius-control",
     "--cue-radius-overlay",
+    "--cue-style-focus-width",
     "--cue-surface-2",
     "--cue-text-body",
     "--cue-text-ui"

package/manifest/components/tool-timeline.json

@@ -107,14 +107,16 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-danger",
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-ok",
     "--cue-radius-control",
+    "--cue-style-focus-width",
     "--cue-surface-2",
     "--cue-text-body",
     "--cue-text-label"

package/manifest/components/toolbar.json

@@ -144,22 +144,25 @@
   "variants": {},
   "defaultVariants": {},
   "tokensUsed": [
-    "--cue-accent",
     "--cue-border",
     "--cue-chrome-toolbar",
     "--cue-control-md",
     "--cue-edge-fade",
     "--cue-fg",
     "--cue-fg-muted",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
     "--cue-pad-row-x",
+    "--cue-paint-fade-length",
     "--cue-radius-control",
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-3",
     "--cue-space-5",
+    "--cue-style-focus-width",
     "--cue-surface-1",
     "--cue-surface-2",
     "--cue-text-ui"

package/manifest/components/tooltip.json

@@ -148,17 +148,56 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
+    "--cue-paint-rim-width",
+    "--cue-paint-scrim-filter",
+    "--cue-paint-shade-far",
+    "--cue-paint-shade-hairline",
+    "--cue-paint-shade-near",
+    "--cue-paint-shadow-scale",
+    "--cue-paint-shadow-spread",
+    "--cue-paint-sheen-ink",
+    "--cue-paint-stroke-angle",
+    "--cue-paint-stroke-overlay-from",
+    "--cue-paint-stroke-overlay-to",
+    "--cue-paint-stroke-width",
     "--cue-radius-control",
     "--cue-radius-overlay",
+    "--cue-radius-scale",
     "--cue-scrim",
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-3",
+    "--cue-style-body-face",
+    "--cue-style-body-leading",
+    "--cue-style-body-size",
+    "--cue-style-body-weight",
+    "--cue-style-control-face",
+    "--cue-style-display-variation",
+    "--cue-style-heading-ink",
+    "--cue-style-help-size",
+    "--cue-style-label-case",
+    "--cue-style-label-face",
+    "--cue-style-label-ink",
+    "--cue-style-label-size",
+    "--cue-style-label-tracking",
+    "--cue-style-label-weight",
+    "--cue-style-menu-highlight",
+    "--cue-style-menu-item-radius",
+    "--cue-style-overlay-ground",
+    "--cue-style-overlay-title-leading",
+    "--cue-style-overlay-title-size",
+    "--cue-style-quiet-ink",
+    "--cue-style-title-face",
+    "--cue-style-title-weight",
+    "--cue-style-tooltip-pad",
     "--cue-surface-2",
     "--cue-text-emphasis",
     "--cue-text-label",
+    "--cue-text-micro",
     "--cue-text-ui",
-    "--cue-tracking-caps"
+    "--cue-tracking-caps",
+    "--cue-tracking-caps-loose",
+    "--cue-tracking-caps-tight"
   ],
   "summary": "A short description of the control under the pointer or the focus ring.",
   "examples": [

package/manifest/components/tree-visibility-toggle.json

@@ -58,6 +58,8 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
@@ -66,6 +68,7 @@
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-4",
+    "--cue-style-focus-width",
     "--cue-surface-2",
     "--cue-text-ui",
     "--cue-warn"

package/manifest/components/tree.json

@@ -141,6 +141,8 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
@@ -149,6 +151,7 @@
     "--cue-space-1",
     "--cue-space-2",
     "--cue-space-4",
+    "--cue-style-focus-width",
     "--cue-surface-2",
     "--cue-text-ui",
     "--cue-warn"

package/manifest/components/universe-grid.json

@@ -115,6 +115,8 @@
     "--cue-danger-soft",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-font-mono",
     "--cue-info",
     "--cue-ok",
@@ -122,6 +124,7 @@
     "--cue-space-2",
     "--cue-space-4",
     "--cue-space-5",
+    "--cue-style-focus-width",
     "--cue-sunken",
     "--cue-text-label",
     "--cue-text-micro",

package/manifest/components/voice-conversation.json

@@ -104,9 +104,12 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-fg-subtle",
+    "--cue-focus",
+    "--cue-focus-ring",
     "--cue-leading-ui",
     "--cue-radius-overlay",
     "--cue-stream",
+    "--cue-style-focus-width",
     "--cue-surface-1",
     "--cue-surface-2",
     "--cue-surface-3",