@c15t/react 3.0.0-alpha.7 → 3.0.0-alpha.9

package/docs/customization/tailwind.md

@@ -1,8 +1,7 @@
 ---
 title: Tailwind CSS
-description: Load c15t's styles next to Tailwind CSS 4 or 3 in every framework,
-  put utilities on c15t component parts, and use Tailwind's dark variant with
-  c15t.
+description: Use c15t's styles with Tailwind CSS 4 or 3 in every framework, put
+  utilities on c15t component parts, and use Tailwind's dark variant with c15t.
 group: customization
 ---
 
@@ -21,7 +20,10 @@ directive and fails the build on a stylesheet that uses it without a matching
 `@tailwind components`. c15t's Tailwind 3 PostCSS plugin removes the layer
 wrappers from c15t's stylesheets before Tailwind 3 runs. c15t's rules then
 win by specificity, as they did in c15t v2, so a utility on a c15t part needs
-Tailwind's important modifier, such as `!p-2`.
+Tailwind's important modifier, such as `!p-2`. The plugin cannot reach the
+`<style>` elements c15t renders itself, so on Tailwind 3 you turn those off
+with `styles: false` and import the stylesheet instead. The Astro integration
+does this for you when it finds Tailwind 3.
 
 The setups below come from fixtures that CI builds for each framework and
 checks in Chromium. The Next.js snippets come from the Next.js 16 Turbopack
@@ -34,9 +36,11 @@ without a backend, so they use `offline()` mode or a local `backendURL`. Keep th
 
 ## Set up Tailwind CSS 4
 
-Install Tailwind's plugin for your build tool, add it to the build, and load
-c15t's stylesheet in the same CSS entry as Tailwind. Vue, Nuxt and Astro load
-c15t's styles for you, so their CSS entry holds only Tailwind.
+Install Tailwind's plugin for your build tool and add it to the build. c15t
+loads its own styles in every framework, so your CSS entry holds only
+Tailwind. Do not import c15t's stylesheet next to Tailwind 4: the stock
+components already render the same rules, and the import would hold back the
+first paint.
 
 **Next.js**
 
@@ -46,20 +50,18 @@ Next.js runs Tailwind 4 through `@tailwindcss/postcss`:
 export default { plugins: { '@tailwindcss/postcss': {} } };
 ```
 
-Import c15t after Tailwind in the global stylesheet that `app/layout.tsx`
-or `pages/_app.tsx` loads:
+Import Tailwind in the global stylesheet that `app/layout.tsx` or
+`pages/_app.tsx` loads:
 
 ```css title="app/globals.css"
 @import 'tailwindcss';
-@import 'c15t/next/styles.css';
 
 @custom-variant dark (&:where(.dark, .dark *));
 ```
 
 **TanStack Start**
 
-Add `@tailwindcss/vite` before the TanStack Start plugin, then import
-Tailwind and c15t from the stylesheet your root route links:
+Add `@tailwindcss/vite` before the TanStack Start plugin:
 
 ```ts title="vite.config.ts"
 import tailwindcss from '@tailwindcss/vite';
@@ -76,11 +78,10 @@ export default defineConfig({
 });
 ```
 
-Import Tailwind and c15t from the stylesheet your root route links:
+Import Tailwind from the stylesheet your root route links:
 
 ```css title="src/styles.css"
 @import 'tailwindcss';
-@import 'c15t/tanstack-start/styles.css';
 
 @custom-variant dark (&:where(.dark, .dark *));
 ```
@@ -95,12 +96,10 @@ import { defineConfig } from 'vite';
 export default defineConfig({ plugins: [react(), tailwindcss()] });
 ```
 
-Import this stylesheet from your entry module in place of a separate
-`c15t/react/styles.css` import:
+Import this stylesheet from your entry module:
 
 ```css title="src/app.css"
 @import 'tailwindcss';
-@import 'c15t/react/styles.css';
 
 @custom-variant dark (&:where(.dark, .dark *));
 ```
@@ -155,8 +154,9 @@ Import this stylesheet from `src/main.ts`:
 
 **Astro**
 
-The integration adds `c15t/astro/styles.css` to every page, so the CSS
-entry holds only Tailwind. Add `@tailwindcss/vite` under `vite.plugins`:
+c15t inlines the banner's rules into each page and links the dialog's
+when it opens, so the CSS entry holds only Tailwind. Add
+`@tailwindcss/vite` under `vite.plugins`:
 
 ```js title="astro.config.mjs"
 import svelte from '@astrojs/svelte';
@@ -202,12 +202,10 @@ import { defineConfig } from 'vite';
 export default defineConfig({ plugins: [svelte(), tailwindcss()] });
 ```
 
-Import this stylesheet from `src/main.ts` in place of a separate
-`@c15t/svelte/styles.css` import:
+Import this stylesheet from `src/main.ts`:
 
 ```css title="src/app.css"
 @import 'tailwindcss';
-@import '@c15t/svelte/styles.css';
 
 @custom-variant dark (&:where(.dark, .dark *));
 ```
@@ -226,7 +224,6 @@ Import this stylesheet from your root `+layout.svelte`:
 
 ```css title="src/app.css"
 @import 'tailwindcss';
-@import '@c15t/svelte/styles.css';
 
 @custom-variant dark (&:where(.dark, .dark *));
 ```
@@ -256,8 +253,12 @@ c15t's parts, pass the URL of your built stylesheet in
 
 ## Set up Tailwind CSS 3
 
-Tailwind 3 loads the same `styles.css` as Tailwind 4 and needs one PostCSS
-plugin. Every c15t package that ships a stylesheet exports it as
+Tailwind 3's preflight is unlayered, so it beats the layered rules c15t
+renders itself and strips the banner's padding and borders. On Tailwind 3,
+turn those rules off with `styles: false` and import c15t's `styles.css`
+through a PostCSS plugin. The Astro integration needs only the plugin: it
+detects Tailwind 3 and links `c15t/astro/styles.css` itself. Every c15t
+package that ships a stylesheet exports the plugin as
 `<package>/postcss-tailwind3`, so use the one from the package you installed:
 
 | You installed                                             | Plugin name                       |
@@ -269,21 +270,26 @@ plugin. Every c15t package that ships a stylesheet exports it as
 They are the same plugin. A config that already lists
 `@c15t/ui/postcss-tailwind3` keeps working.
 
-Make three changes:
+Make four changes:
 
-1. Add the plugin to your PostCSS plugins, before `tailwindcss`. Write the plugins as an object, as the examples below do.
+1. Set `styles: false` where you configure c15t: `options` on `ConsentRoot`
+   in Next.js and TanStack Start, `options` on `ConsentProvider` in React,
+   and `styles={false}` on `ConsentManagerProvider` in Svelte and SvelteKit.
+   Vue, Nuxt and Astro need no change.
+2. Add the plugin to your PostCSS plugins, before `tailwindcss`. Write the plugins as an object, as the examples below do.
    PostCSS runs them in the order of the keys. Next.js also accepts an array
    of plugin names, but Vite's PostCSS loader rejects that form.
-2. Where you import c15t's stylesheet yourself, put the import above the
-   `@tailwind` directives, whatever your build tool. Vite drops an `@import`
+3. Import c15t's stylesheet above the `@tailwind` directives, whatever your
+   build tool. Vue, Nuxt and Astro skip this step. Vite drops an `@import`
    that follows another rule, with the warning
    `@import must precede all other statements`, and the banner renders
    unstyled. Next.js 16 with Turbopack fails the build.
-3. Set `darkMode: 'class'` so Tailwind's `dark:` variant follows the same
+4. Set `darkMode: 'class'` so Tailwind's `dark:` variant follows the same
    `dark` class c15t reads.
 
-The plugin also processes the stylesheets c15t loads for you, such as Astro's
-injected one. Without it, Tailwind 3 stops
+The plugin also processes the stylesheets the Vue and Nuxt components import,
+and the one the Astro integration adds on a Tailwind 3 site. Without it,
+Tailwind 3 stops
 the build with "`@layer components` is used but no matching
 `@tailwind components` directive is present", or purges c15t's rules, because
 c15t's class names never appear in your source.
@@ -293,8 +299,9 @@ class. Add the important modifier to utilities you pass to c15t parts:
 `!bg-red-500`, `hover:!bg-red-500`. A bare `bg-red-500` has no effect. Theme
 tokens work the same on Tailwind 3 and 4.
 
-In React and Next.js apps, `c15t setup` makes the first two changes when it
-finds Tailwind 3. It replaces an existing
+In React and Next.js apps, `c15t setup` adds the plugin and the stylesheet
+import when it finds Tailwind 3, but does not set `styles: false`. Add that
+yourself. It replaces an existing
 `styles.tw3.css` import from an earlier setup with `styles.css`. When it
 cannot edit your PostCSS config, it prints the step to do by hand. See
 [setup](https://c15t.com/docs/cli/commands/setup#set-up-styles-and-tailwind-css).
@@ -327,7 +334,7 @@ export default {
 
 Import `c15t/next/styles.css` above the directives. Turbopack fails the
 build when the import sits below them. The same order works with
-webpack:
+webpack. Set `styles: false` in `ConsentRoot`'s `options` as well:
 
 ```css title="app/globals.css"
 /* Turbopack rejects an @import below other rules, so it goes first. */
@@ -358,7 +365,8 @@ export default {
 ```
 
 Import `c15t/tanstack-start/styles.css` above the directives, in the
-stylesheet your root route links:
+stylesheet your root route links, and set `styles: false` in
+`ConsentRoot`'s `options`:
 
 ```css title="src/styles.css"
 /* Vite ignores an @import below other rules, so it goes first. */
@@ -388,8 +396,9 @@ export default {
 } satisfies Config;
 ```
 
-Import `c15t/react/styles.css` above the directives, and import this
-stylesheet from your entry module:
+Import `c15t/react/styles.css` above the directives, import this
+stylesheet from your entry module, and set `styles: false` in the
+`ConsentProvider` options:
 
 ```css title="src/app.css"
 /* Vite ignores an @import below other rules, so it goes first. */
@@ -489,8 +498,12 @@ export default {
 } satisfies Config;
 ```
 
-The plugin processes the stylesheet the integration injects, so the CSS
-entry holds only the directives:
+When the integration finds Tailwind 3 in the project, it adds
+`c15t/astro/styles.css` to every page through Astro's CSS pipeline
+instead of inlining the banner's rules, so the plugin processes it. You
+do not set `styles: false` or import c15t's stylesheet, and the CSS
+entry holds only the directives. The first paint still waits for that
+stylesheet:
 
 ```css title="src/styles/global.css"
 @tailwind base;
@@ -521,8 +534,9 @@ export default {
 } satisfies Config;
 ```
 
-Import `@c15t/svelte/styles.css` above the directives, and import this
-stylesheet from `src/main.ts`:
+Import `@c15t/svelte/styles.css` above the directives, import this
+stylesheet from `src/main.ts`, and pass `styles={false}` to
+`ConsentManagerProvider`:
 
 ```css title="src/app.css"
 /* Vite ignores an @import below other rules, so it goes first. */
@@ -556,8 +570,9 @@ export default {
 } satisfies Config;
 ```
 
-Import `@c15t/svelte/styles.css` above the directives, and import this
-stylesheet from your root `+layout.svelte`:
+Import `@c15t/svelte/styles.css` above the directives, import this
+stylesheet from your root `+layout.svelte`, and pass `styles={false}` to
+`ConsentManagerProvider`:
 
 ```css title="src/app.css"
 /* Vite ignores an @import below other rules, so it goes first. */

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
@@ -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`.
 

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

@@ -12,20 +12,23 @@ The [quickstart](../quickstart.md) mounts both in
 `src/consent.tsx`:
 
 ```tsx title="src/consent.tsx"
+import { manifest } from '@c15t/browser/headless';
 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 = hosted({ url: 'https://your-project.inth.app' });
+const mode = manifest({
+	backendURL:
+		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
+	manifest: consentManifest,
+});
 
 export const Consent = ({ children }: { children: ReactNode }) => (
 	<ConsentProvider options={{ mode, scripts }}>

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

@@ -14,20 +14,23 @@ group: frameworks
 code.
 
 ```tsx title="src/consent.tsx"
+import { manifest } from '@c15t/browser/headless';
 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 = hosted({ url: 'https://your-project.inth.app' });
+const mode = manifest({
+	backendURL:
+		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
+	manifest: consentManifest,
+});
 
 export const Consent = ({ children }: { children: ReactNode }) => (
 	<ConsentProvider options={{ mode, scripts }}>
@@ -130,7 +133,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,20 +14,23 @@ The [quickstart](../quickstart.md) does this in
 `src/consent.tsx`:
 
 ```tsx title="src/consent.tsx"
+import { manifest } from '@c15t/browser/headless';
 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 = hosted({ url: 'https://your-project.inth.app' });
+const mode = manifest({
+	backendURL:
+		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
+	manifest: consentManifest,
+});
 
 export const Consent = ({ children }: { children: ReactNode }) => (
 	<ConsentProvider options={{ mode, scripts }}>
@@ -41,9 +44,11 @@ export const Consent = ({ children }: { children: ReactNode }) => (
 );
 ```
 
-`hosted({ url })` points the provider at your Inth backend. Replace
-`https://your-project.inth.app` with the URL from your Inth project. The
-Next.js and TanStack Start adapters export `ConsentRoot` instead, which wraps
+`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
 this provider and passes it server-resolved state.
 
 ## Provider options
@@ -56,35 +61,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, `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({ 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                                                                                                                |
 
 `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,20 +36,23 @@ Most apps start with four components. `ConsentProvider` holds the runtime,
 one file:
 
 ```tsx title="src/consent.tsx"
+import { manifest } from '@c15t/browser/headless';
 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 = hosted({ url: 'https://your-project.inth.app' });
+const mode = manifest({
+	backendURL:
+		import.meta.env.VITE_C15T_BACKEND_URL ?? 'https://benchmarks-inth.inth.app',
+	manifest: consentManifest,
+});
 
 export const Consent = ({ children }: { children: ReactNode }) => (
 	<ConsentProvider options={{ mode, scripts }}>
@@ -79,7 +82,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,14 @@ 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      |
+| 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
@@ -60,7 +61,8 @@ 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
@@ -83,6 +85,18 @@ 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.
 
+## 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 {