@c15t/react 3.0.0-alpha.8 → 3.0.0

package/docs/customization/tokens.md

@@ -8,14 +8,14 @@ group: customization
 ## Where tokens come from
 
 c15t's components take their colors from `--c15t-*` CSS variables, and most
-of their fonts, radii, spacing, shadows and motion too. c15t's stylesheet sets
-the defaults. You change them with a theme object or with CSS, and every part
+of their fonts, radii, spacing, shadows and motion too. c15t's rules set the
+defaults. You change them with a theme object or with CSS, and every part
 that reads a token changes with it. Some values are still fixed for one
 component, such as button padding, the radius of the "Secured by" tag and
 several font sizes and weights, so a token change does not move them. Restyle
 those parts through [slots](./slots.md) or your own CSS.
 [Stylesheets and CSS layers](./stylesheets.md)
-covers which stylesheet to load, and [dark mode](./dark-mode.md)
+covers how c15t loads its rules, and [dark mode](./dark-mode.md)
 covers the dark set of tokens.
 
 ## Set semantic values together
@@ -40,13 +40,13 @@ export const theme = defineTheme({
 Install `@c15t/ui` if importing its theme helper directly. Where the theme
 goes depends on the framework:
 
-| Framework                      | Tokens                                                                                                                            | `consentActions`                    |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| Next.js, TanStack Start, React | `<ConsentTheme theme={theme} />`, rendered on the server where the app has one                                                    | `theme` in the provider options     |
-| Nuxt, Vue                      | `theme` or `tokens` in the module or plugin options                                                                               | Not available                       |
-| Astro                          | `theme` in the integration options                                                                                                | The same `theme`                    |
-| Svelte, SvelteKit              | `generateThemeCSS(theme)` from `@c15t/ui/theme` on the server, in a `<style>` element, or `--c15t-*` variables in your stylesheet | `theme` on `ConsentManagerProvider` |
-| HTML, JavaScript               | `ui.theme`                                                                                                                        | Not available                       |
+| Framework                      | Tokens                                                                                                                            | `consentActions`                                                   |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| Next.js, TanStack Start, React | `<ConsentTheme theme={theme} />`, rendered on the server where the app has one                                                    | `theme` in the provider options                                    |
+| Nuxt, Vue                      | `theme` or `tokens` in the module or plugin options                                                                               | Not available                                                      |
+| Astro                          | `theme` in the integration options                                                                                                | The same `theme`                                                   |
+| Svelte, SvelteKit              | `generateThemeCSS(theme)` from `@c15t/ui/theme` on the server, in a `<style>` element, or `--c15t-*` variables in your stylesheet | `theme` on `ConsentProvider` (Svelte) or `ConsentRoot` (SvelteKit) |
+| HTML, JavaScript               | `ui.theme`                                                                                                                        | Not available                                                      |
 
 React and Svelte providers do not turn tokens in their `theme` option into
 CSS, and warn in development when a theme holds tokens but the page has no
@@ -59,9 +59,9 @@ setup.
 ## Combine a generated theme with your own CSS
 
 `generateThemeCSS` writes its variables on `:root:root` and
-`.c15t-theme-root.c15t-theme-root`, one step more specific than the defaults
-in `styles.css`. The theme therefore overrides the defaults whether its
-`<style>` element comes before or after the stylesheet. The same output backs
+`.c15t-theme-root.c15t-theme-root`, more specific than c15t's defaults. The
+theme therefore overrides the defaults whether its
+`<style>` element comes before or after c15t's rules. The same output backs
 `ConsentTheme` in React, Next.js and TanStack Start, Astro's `theme` option and
 the script tag's `ui.theme`.
 
@@ -169,6 +169,35 @@ them, on any screen size.
 Test long translations and small screens after changing width or typography.
 A compact banner must still fit the required actions.
 
+## Stack the banner with your own layers
+
+The banner and its overlay sit at the top of the page's stacking order by
+default. Lower them when a navbar, drawer, or chat widget should cover the
+banner.
+
+| Variable                               | Default  | Target                        |
+| -------------------------------------- | -------- | ----------------------------- |
+| `--consent-banner-z-index`             | `999998` | Banner                        |
+| `--consent-banner-overlay-z-index`     | `999997` | Backdrop of a blocking banner |
+| `--iab-consent-banner-z-index`         | `999998` | IAB TCF banner                |
+| `--iab-consent-banner-overlay-z-index` | `999997` | IAB TCF banner backdrop       |
+| `--consent-dialog-z-index`             | `999999` | Preferences dialog            |
+| `--consent-dialog-overlay-z-index`     | `999998` | Preferences dialog backdrop   |
+
+```css
+:root {
+  --consent-banner-z-index: 40;
+  --consent-banner-overlay-z-index: 39;
+}
+```
+
+Keep each z-index above its overlay's, or the backdrop covers the card it
+belongs to. Keep the dialog above the banner so Customize opens on top.
+
+Only the card and the "Secured by" tag take clicks. Clicks on the space
+around a floating card, or beside the tag on a bar, reach the page. A
+blocking banner catches every click.
+
 ## Restyle the "Secured by" tag
 
 The tag sits on the edge of the banner and dialog cards and uses the primary

package/docs/frameworks/react/components/consent-banner.md

@@ -12,28 +12,30 @@ The [quickstart](../quickstart.md) mounts both in
 `src/consent.tsx`:
 
 ```tsx title="src/consent.tsx"
-import { manifest } from '@c15t/browser/headless';
+import { posthog } from '@c15t/integrations/posthog';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
+	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
-import { consentManifest } from './c15t-manifest';
-import { scripts } from './scripts';
-
-import 'c15t/react/styles.css';
-
-const mode = manifest({
-	backendURL:
-		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
-	manifest: consentManifest,
-});
+const options = {
+	// Asks VITE_C15T_BACKEND_URL for each visitor's policy.
+	mode: hosted(),
+	scripts: [
+		posthog({
+			id: 'phc_your_project_key',
+			initOptions: { cookieless_mode: 'never' },
+			loadMode: 'after-consent',
+		}),
+	],
+};
 
 export const Consent = ({ children }: { children: ReactNode }) => (
-	<ConsentProvider options={{ mode, scripts }}>
+	<ConsentProvider options={options}>
 		{children}
 		<ConsentBanner />
 		<ConsentDialog />

package/docs/frameworks/react/components/consent-dialog.md

@@ -14,28 +14,30 @@ group: frameworks
 code.
 
 ```tsx title="src/consent.tsx"
-import { manifest } from '@c15t/browser/headless';
+import { posthog } from '@c15t/integrations/posthog';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
+	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
-import { consentManifest } from './c15t-manifest';
-import { scripts } from './scripts';
-
-import 'c15t/react/styles.css';
-
-const mode = manifest({
-	backendURL:
-		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
-	manifest: consentManifest,
-});
+const options = {
+	// Asks VITE_C15T_BACKEND_URL for each visitor's policy.
+	mode: hosted(),
+	scripts: [
+		posthog({
+			id: 'phc_your_project_key',
+			initOptions: { cookieless_mode: 'never' },
+			loadMode: 'after-consent',
+		}),
+	],
+};
 
 export const Consent = ({ children }: { children: ReactNode }) => (
-	<ConsentProvider options={{ mode, scripts }}>
+	<ConsentProvider options={options}>
 		{children}
 		<ConsentBanner />
 		<ConsentDialog />
@@ -135,7 +137,7 @@ If a preload fails, for example because the visitor is offline, nothing is
 cached: the next hover, focus or open tries the download again.
 
 The dialog's CSS travels in the same chunk and is applied before the dialog
-renders, so your app's `styles.css` import stays small.
+renders, so the first page load carries only the banner's rules.
 
 Without an `open` prop, Escape closes the dialog without saving. If the
 policy still owes a choice, the banner comes back. Save Settings, Accept All and

package/docs/frameworks/react/components/consent-provider.md

@@ -14,28 +14,30 @@ The [quickstart](../quickstart.md) does this in
 `src/consent.tsx`:
 
 ```tsx title="src/consent.tsx"
-import { manifest } from '@c15t/browser/headless';
+import { posthog } from '@c15t/integrations/posthog';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
+	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
-import { consentManifest } from './c15t-manifest';
-import { scripts } from './scripts';
-
-import 'c15t/react/styles.css';
-
-const mode = manifest({
-	backendURL:
-		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
-	manifest: consentManifest,
-});
+const options = {
+	// Asks VITE_C15T_BACKEND_URL for each visitor's policy.
+	mode: hosted(),
+	scripts: [
+		posthog({
+			id: 'phc_your_project_key',
+			initOptions: { cookieless_mode: 'never' },
+			loadMode: 'after-consent',
+		}),
+	],
+};
 
 export const Consent = ({ children }: { children: ReactNode }) => (
-	<ConsentProvider options={{ mode, scripts }}>
+	<ConsentProvider options={options}>
 		{children}
 		<ConsentBanner />
 		<ConsentDialog />
@@ -46,11 +48,14 @@ export const Consent = ({ children }: { children: ReactNode }) => (
 );
 ```
 
-`manifest()` from `@c15t/browser/headless` resolves the policy from the
-snapshot the build bundled, and sends consent choices to `backendURL`. Replace
-the demo project URL with the URL from your Inth project, or set
-`VITE_C15T_BACKEND_URL`. To fetch the policy from the backend on every page
-load instead, pass `hosted({ url })` from `c15t/react`. The Next.js and TanStack Start adapters export `ConsentRoot` instead, which wraps
+`hosted()` from `c15t/react` asks the backend's `/init` for the visitor's
+policy on each page load, and sends consent choices to the same backend. It
+uses the backend URL `consentManifest()` read from `VITE_C15T_BACKEND_URL` or
+`VITE_INTH_PROJECT_URL`. Set one to the backend URL from your Inth project. To
+resolve a bundled policy in the browser instead, pass `manifest()` from
+`c15t/react`; see
+[rendering](../rendering.md#bundle-the-policy-at-build-time).
+The Next.js and TanStack Start adapters export `ConsentRoot` instead, which wraps
 this provider and passes it server-resolved state.
 
 ## Provider options
@@ -63,35 +68,35 @@ the provider to change them. `scripts`, `vendors`, `networkBlocker`,
 `iframeBlocker`, `consentCategories`, `overrides`, `user`, `callbacks` and
 `enabled` apply when they change.
 
-| Option                        | Purpose                                                                                                                                                                          |
-| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `mode`                        | Required. `hosted({ url })` for a backend, `manifest()` from `@c15t/browser/headless` for a bundled policy, `offline()` for local policies, or `custom()` for your own transport |
-| `prefetch`                    | Server-resolved state, or a promise of it, from a framework adapter's server helper                                                                                              |
-| `scripts`                     | Consent-gated vendor scripts. See [scripts and embeds](../scripts.md)                                                                                                            |
-| `vendors`                     | Vendors listed under their category with their own switch. See [vendor consent](../vendor-consent.md)                                                                            |
-| `scriptLoader`                | Options for the script loader module                                                                                                                                             |
-| `networkBlocker`              | Rules that hold `fetch` and `XMLHttpRequest` calls until their category is allowed, or `false`                                                                                   |
-| `iframeBlocker`               | Gates DOM iframes that carry `data-category`. On by default; `false` turns it off                                                                                                |
-| `persistence`                 | Stores the visitor's choice in a cookie and localStorage. On by default                                                                                                          |
-| `storageConfig`               | Storage key and cookie settings for the stored choice                                                                                                                            |
-| `clearOnRevocation`           | Cookies and storage keys to delete when a category is denied                                                                                                                     |
-| `reloadOnConsentRevoked`      | Reload the page after the visitor turns off a granted category or vendor. Defaults to `true`                                                                                     |
-| `consentCategories`           | Categories the preference dialog offers alongside those your scripts use, within the policy's scope                                                                              |
-| `overrides`                   | Force the country, region or language the policy is resolved for, for testing                                                                                                    |
-| `user`                        | Link consent records to a signed-in user                                                                                                                                         |
-| `callbacks`                   | Choice, permission and error events                                                                                                                                              |
-| `i18n`                        | Languages and message overrides                                                                                                                                                  |
-| `legalLinks`                  | Privacy policy and other links shown in the banner and dialog                                                                                                                    |
-| `theme`                       | `consentActions` and slot styles. Tokens go through `ConsentTheme`; see [customize](../customize.md)                                                                             |
-| `components`                  | Slot attributes per component part                                                                                                                                               |
-| `presentation`                | Banner and dialog shape, position and blocking                                                                                                                                   |
-| `experiment`                  | A/B test of `presentation`, read once at mount. See [banner experiments](../../../guides/banner-experiments.md)                                                                  |
-| `journey`                     | Random id that links each `/init` to the save that follows. See [session reports](../../../concepts/data-fetching.md#link-an-init-to-the-save-that-follows)                      |
-| `colorScheme`                 | `'light'`, `'dark'`, `'system'`, or `null` to leave the `c15t-dark` class alone                                                                                                  |
-| `noStyle`, `disableAnimation` | Drop the built-in styles, or turn off animations                                                                                                                                 |
-| `preloadDialog`               | When the deferred `ConsentDialog` starts loading: `'idle'` (default) or `'intent'`; see [ConsentDialog](./consent-dialog.md#behavior)                                            |
-| `nonce`                       | Content Security Policy nonce for script elements c15t inserts                                                                                                                   |
-| `enabled`                     | Set `false` only when you deliberately bypass consent enforcement                                                                                                                |
+| Option                        | Purpose                                                                                                                                                                                                                         |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mode`                        | Required. `hosted()` for the backend's `/init`, `manifest()` for a bundled policy, `offline()` for local policies, all from `c15t/react`, or `custom()` for your own transport. See [consent modes](../../../concepts/modes.md) |
+| `prefetch`                    | Server-resolved state, or a promise of it, from a framework adapter's server helper                                                                                                                                             |
+| `scripts`                     | Consent-gated vendor scripts. See [scripts and embeds](../scripts.md)                                                                                                                                                           |
+| `vendors`                     | Vendors listed under their category with their own switch. See [vendor consent](../vendor-consent.md)                                                                                                                           |
+| `scriptLoader`                | Options for the script loader module                                                                                                                                                                                            |
+| `networkBlocker`              | Rules that hold `fetch` and `XMLHttpRequest` calls until their category is allowed, or `false`                                                                                                                                  |
+| `iframeBlocker`               | Gates DOM iframes that carry `data-category`. On by default; `false` turns it off                                                                                                                                               |
+| `persistence`                 | Stores the visitor's choice in a cookie and localStorage. On by default                                                                                                                                                         |
+| `storageConfig`               | Storage key and cookie settings for the stored choice                                                                                                                                                                           |
+| `clearOnRevocation`           | Cookies and storage keys to delete when a category is denied                                                                                                                                                                    |
+| `reloadOnConsentRevoked`      | Reload the page after the visitor turns off a granted category or vendor. Defaults to `true`                                                                                                                                    |
+| `consentCategories`           | Categories the preference dialog offers alongside those your scripts use, within the policy's scope                                                                                                                             |
+| `overrides`                   | Force the country, region or language the policy is resolved for, for testing                                                                                                                                                   |
+| `user`                        | Link consent records to a signed-in user                                                                                                                                                                                        |
+| `callbacks`                   | Choice, permission and error events                                                                                                                                                                                             |
+| `i18n`                        | Languages and message overrides                                                                                                                                                                                                 |
+| `legalLinks`                  | Privacy policy and other links shown in the banner and dialog                                                                                                                                                                   |
+| `theme`                       | `consentActions` and slot styles. Tokens go through `ConsentTheme`; see [customize](../customize.md)                                                                                                                            |
+| `components`                  | Slot attributes per component part                                                                                                                                                                                              |
+| `presentation`                | Banner and dialog shape, position and blocking                                                                                                                                                                                  |
+| `experiment`                  | A/B test of `presentation`, read once at mount. See [banner experiments](../../../guides/banner-experiments.md)                                                                                                                 |
+| `journey`                     | Random id that links each `/init` to the save that follows. See [session reports](../../../concepts/data-fetching.md#link-an-init-to-the-save-that-follows)                                                                     |
+| `colorScheme`                 | `'light'`, `'dark'`, `'system'`, or `null` to leave the `c15t-dark` class alone                                                                                                                                                 |
+| `noStyle`, `disableAnimation` | Drop the built-in styles, or turn off animations                                                                                                                                                                                |
+| `preloadDialog`               | When the deferred `ConsentDialog` starts loading: `'idle'` (default) or `'intent'`; see [ConsentDialog](./consent-dialog.md#behavior)                                                                                           |
+| `nonce`                       | Content Security Policy nonce for script elements c15t inserts                                                                                                                                                                  |
+| `enabled`                     | Set `false` only when you deliberately bypass consent enforcement                                                                                                                                                               |
 
 `enabled: false` grants categories and allows gated loading while suppressing
 consent UI. It is not a way to fix failed initialization or hide a banner in

package/docs/frameworks/react/components.md

@@ -36,28 +36,30 @@ Most apps start with four components. `ConsentProvider` holds the runtime,
 one file:
 
 ```tsx title="src/consent.tsx"
-import { manifest } from '@c15t/browser/headless';
+import { posthog } from '@c15t/integrations/posthog';
 import {
 	ConsentBanner,
 	ConsentDialog,
 	ConsentDialogLink,
 	ConsentProvider,
+	hosted,
 } from 'c15t/react';
 import type { ReactNode } from 'react';
 
-import { consentManifest } from './c15t-manifest';
-import { scripts } from './scripts';
-
-import 'c15t/react/styles.css';
-
-const mode = manifest({
-	backendURL:
-		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
-	manifest: consentManifest,
-});
+const options = {
+	// Asks VITE_C15T_BACKEND_URL for each visitor's policy.
+	mode: hosted(),
+	scripts: [
+		posthog({
+			id: 'phc_your_project_key',
+			initOptions: { cookieless_mode: 'never' },
+			loadMode: 'after-consent',
+		}),
+	],
+};
 
 export const Consent = ({ children }: { children: ReactNode }) => (
-	<ConsentProvider options={{ mode, scripts }}>
+	<ConsentProvider options={options}>
 		{children}
 		<ConsentBanner />
 		<ConsentDialog />
@@ -84,7 +86,8 @@ explains the trade-off.
 
 Import `IABProvider`, `IABConsentBanner` and `IABConsentDialog` from
 `c15t/react/iab`, render them inside `ConsentProvider` next to
-`ConsentBanner` and `ConsentDialog`, and load `c15t/react/iab/styles.css`. The stock banner and dialog stay closed
+`ConsentBanner` and `ConsentDialog`, and load `c15t/react/styles.css` and
+`c15t/react/iab/styles.css` with `styles: false`. The stock banner and dialog stay closed
 under an IAB policy. See
 [IAB TCF](./iab.md).
 

package/docs/frameworks/react/compose.md

@@ -315,9 +315,9 @@ banner keeps them as long as you keep the parts that own them:
 
 ## Keep theme tokens and slots working
 
-The parts render the stock class names, so the c15t stylesheet and its
-`--c15t-*` tokens style a composed banner the way they style the stock one.
-Keep the stylesheet import.
+The parts render the stock class names, and the banner's `Root` renders
+c15t's rules, so c15t's styles and `--c15t-*` tokens style a composed
+banner the way they style the stock one.
 
 Slots in the provider's `options.components` reach each part by key:
 `banner.root`, `banner.card`, `banner.header`, `banner.title`,

package/docs/frameworks/react/content-security-policy.md

@@ -10,13 +10,16 @@ group: frameworks
 
 A React app with c15t adds these to the page, and your policy must allow them:
 
-| What                                                                                       | Directive                                             |
-| ------------------------------------------------------------------------------------------ | ----------------------------------------------------- |
-| `c15t/react/styles.css`, which your bundler emits with your own CSS                        | `style-src 'self'`                                    |
-| The `<style id="c15t-theme">` element, if you render `ConsentTheme`                        | `style-src` with a nonce or its hash                  |
-| `<script>` elements the script loader creates for `scripts` entries, both `src` and inline | `script-src` with each vendor's host, or a nonce      |
-| Browser requests to your backend's `/init` and `/subjects`                                 | `connect-src` with the backend origin                 |
-| Iframes inside `ConsentGate`, and the frames, images and requests your vendors load        | `frame-src`, `img-src`, `connect-src` for each vendor |
+| What                                                                                                            | Directive                                             |
+| --------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| The `<style>` elements the banner, dialog and other stock components render with c15t's rules                   | `style-src` with a nonce                              |
+| `c15t/react/styles.css`, only if you import it with `styles: false`                                             | `style-src 'self'`                                    |
+| The `<style id="c15t-theme">` element, if you render `ConsentTheme`                                             | `style-src` with a nonce or its hash                  |
+| `<script>` elements the script loader creates for `scripts` entries, both `src` and inline                      | `script-src` with each vendor's host, or a nonce      |
+| The inline `<script>` that `consentManifest()` adds to `index.html` to send `/init` early                       | `script-src` with a nonce or its hash                 |
+| With server rendering, the inline `<script>` before the banner's buttons that holds a tap made before hydration | `script-src` with a nonce or its hash                 |
+| Browser requests to your backend's `/init` and `/subjects`                                                      | `connect-src` with the backend origin                 |
+| Iframes inside `ConsentGate`, and the frames, images and requests your vendors load                             | `frame-src`, `img-src`, `connect-src` for each vendor |
 
 In a client-rendered app, c15t components set their inline styles through
 React. A policy does not restrict styles set that way, so they need no
@@ -24,8 +27,10 @@ directive.
 
 ## Allow the consent backend
 
-With `hosted({ url })`, the browser calls `GET {url}/init` on every page load
-and `POST {url}/subjects` when the visitor accepts, rejects or saves. Add the
+With `hosted()`, the browser calls `GET {url}/init` on every page load
+and `POST {url}/subjects` when the visitor accepts, rejects or saves. With
+`manifest()`, it calls `POST {url}/subjects`, and `GET {url}/init` only when
+the policy needs a location the browser does not know. Add the
 backend's origin to `connect-src`:
 
 ```txt title="Content-Security-Policy (partial)"
@@ -60,13 +65,15 @@ when a server renders or rewrites your `index.html` per request.
 
 Pass the nonce as `options.nonce` on `ConsentProvider`. The script loader
 stamps it on every `<script>` it creates. A `nonce` on a single `scripts`
-entry takes precedence for that element.
+entry takes precedence for that element. The stock components put it on the
+`<style>` elements that carry c15t's rules.
 
 With Vite, set `html.cspNonce` to a placeholder in `vite.config.ts`, and have
 your server replace it with a new nonce on every response. Vite then adds
 `<meta property="csp-nonce" nonce="...">` to the page, and the browser keeps the
-value in the tag's `nonce` property. Read it where you create the provider, in
-the quickstart's `src/consent.tsx`:
+value in the tag's `nonce` property. Vite also stamps the nonce on the early
+`/init` script. Read it where you create the provider, in the
+quickstart's `src/consent.tsx`:
 
 ```tsx title="src/consent.tsx (partial)"
 const nonce =
@@ -83,6 +90,22 @@ The provider reads `options.nonce` once, when it mounts. A server-rendered
 React app, such as one built with React Router framework mode, reads the nonce
 from its own request and passes it the same way.
 
+On a static host, allow the early `/init` script by the hash in the browser's
+`Refused to execute inline script` error. If the policy blocks it, the app
+sends `/init` itself.
+
+## Allow c15t's style elements
+
+The banner, dialog and other stock components render c15t's rules as
+`<style>` elements. A `style-src` without `'unsafe-inline'` must admit them.
+Either:
+
+* Set `options.nonce` on `ConsentProvider`, as in [use a nonce](#use-a-nonce).
+  The elements then render next to each component with the nonce. React 19
+  would otherwise move them into `<head>` and drop the nonce.
+* Or set `styles: false` in the provider options and import
+  `c15t/react/styles.css` from your bundle. `style-src 'self'` admits it.
+
 ## Allow the theme style element
 
 `ConsentTheme` renders your theme tokens into a `<style id="c15t-theme">`

package/docs/frameworks/react/customize.md

@@ -1,8 +1,8 @@
 ---
 title: Customize
 description: Change the colors, fonts, layout, button styles and copy of the
-  c15t banner and dialog in a React app with the stylesheet, theme tokens,
-  provider options and slots.
+  c15t banner and dialog in a React app with theme tokens, provider options and
+  slots, and load the stylesheet yourself when you need to.
 group: frameworks
 ---
 
@@ -24,26 +24,35 @@ across frameworks.
 See the [design gallery](../../customization/recipes.md) for five banner designs,
 from a bottom bar to a fully custom one, with tested code for this framework.
 
-## Import the stylesheet
+## Import the stylesheet yourself
 
-Import the stylesheet once, in the module that renders `ConsentProvider`. The
-[quickstart](./quickstart.md) does this in `src/consent.tsx`:
+A React app imports no c15t stylesheet. `ConsentBanner`, `ConsentDialog` and
+the other stock components render the rules they use as `<style>` elements.
 
-```tsx
+Import the stylesheet yourself with Tailwind CSS 3, to put c15t's rules in a
+named cascade layer. Set `styles: false` in the provider
+options, so the components add no second copy, and import the stylesheet once
+in the module that renders `ConsentProvider`:
+
+```tsx title="src/consent.tsx (partial)"
 import 'c15t/react/styles.css';
+
+// In the ConsentProvider options:
+styles: false,
 ```
 
-The import is the same with or without Tailwind. To import the stylesheet from
-CSS instead, put it at the top of your global stylesheet, above any
-`@tailwind` directives. `postcss-import`, which Vite uses, ignores an
-`@import` that follows other rules. Tailwind 3 also needs a PostCSS plugin;
+To import the stylesheet from CSS instead, put it at the top of your global
+stylesheet, above any `@tailwind` directives. `postcss-import`, which Vite
+uses, ignores an `@import` that follows other rules. Tailwind 3 also needs a
+PostCSS plugin;
 [Tailwind CSS](../../customization/tailwind.md#set-up-tailwind-css-3) shows the
 setup.
 
 ## Change colors, fonts and radius
 
 Colors, radii, shadows, typography, and motion come from `--c15t-*` custom
-properties. The package stylesheet sets the default values. To change them,
+properties. The rules the components render set the default values, as
+does `styles.css` when you import it with `styles: false`. To change them,
 render `ConsentTheme` with your theme where your app renders on the server,
 or override the variables directly in your CSS.
 
@@ -80,8 +89,7 @@ inside `<style>`.
 
 A single-page app has no server render, so pick one of two ways:
 
-* **Set the variables in your CSS.** Nothing extra ships to the browser. Load
-  this after `c15t/react/styles.css`:
+* **Set the variables in your CSS.** Nothing extra ships to the browser:
 
   ```css title="src/index.css"
   :root {

package/docs/frameworks/react/hooks.md

@@ -65,6 +65,6 @@ Use focused hooks for feature gates. For a complete custom prompt or preference
 center, use `useHeadlessConsentUI()` for surface actions and `useConsentDraft()`
 for staged choices, inside one `ConsentDraftProvider` so the save commits the
 same draft. v3 has no `useConsentManager()`; the
-[upgrade guide](../../upgrade-v3.md#replace-useconsentmanager) maps each of its
-fields to a hook. Read [how consent works](../../concepts/how-consent-works.md#a-permission-is-not-a-recorded-choice) before
+[`use-consent-manager-to-hooks` codemod](https://c15t.com/docs/cli/commands/codemods#migrate-useconsentmanager-to-v3-hooks)
+rewrites most of its calls to hooks. Read [how consent works](../../concepts/how-consent-works.md#a-permission-is-not-a-recorded-choice) before
 treating a callback as evidence of a choice.