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

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

@@ -24,8 +24,6 @@ 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',

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

@@ -26,8 +26,6 @@ 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',
@@ -135,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

@@ -26,8 +26,6 @@ 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',

package/docs/frameworks/react/components.md

@@ -48,8 +48,6 @@ 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',
@@ -84,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 {

package/docs/frameworks/react/iab.md

@@ -21,10 +21,11 @@ Install `@c15t/iab` alongside your framework adapter, then mount the IAB
 components inside an existing consent provider connected to Inth.
 
 Import the components from `c15t/react/iab` and render them inside your
-existing `ConsentProvider` from `c15t/react`. Import `c15t/react/iab/styles.css`
-at your global stylesheet entry, after `c15t/react/styles.css`: the IAB
-stylesheet holds only the IAB rules and uses the tokens from the base
-stylesheet.
+existing `ConsentProvider` from `c15t/react`.
+
+The IAB banner and dialog render their own styles by default. Leave the
+provider's `styles` option enabled and render the components without a CSS
+import:
 
 ```tsx title="src/iab-consent.tsx"
 import {
@@ -55,6 +56,18 @@ IAB presentation follows `presentation.prompt.blocking` and
 scroll locking and a backdrop together. See [migration](../../upgrade-v3.md) for
 legacy option behavior.
 
+## Mount IABProvider for every IAB policy
+
+IAB is opt-in. The standard `ConsentBanner` and `ConsentDialog` do not
+handle the IAB model, so when a visitor's policy uses it, the backend
+sends its vendor list and the app has no `IABProvider`, they throw an
+`IABUnavailableError` (code `C15T_IAB_UNAVAILABLE`):
+`c15t: this visitor's policy uses IAB TCF, but no <IABProvider> is mounted`.
+The error happens during render, on the server and in the browser, so
+your error boundary or the framework's error overlay shows it. Render `IABProvider` from
+`c15t/react/iab` for those visitors, or remove the `iab` model from the
+policy.
+
 ## Verify vendor and purpose choices
 
 Test category choices alongside vendor, purpose, legitimate-interest and special
@@ -62,6 +75,25 @@ feature controls used by your integration. Confirm the TC String and `__tcfapi`
 reflect the saved state, and verify the vendor's actual requests. A category-only
 banner test does not establish that the IAB flow works.
 
+## Load an external stylesheet
+
+With Tailwind CSS 3, or when you want to put c15t in a named cascade layer,
+import `c15t/react/styles.css` and then `c15t/react/iab/styles.css` at your
+global stylesheet entry. The IAB stylesheet holds the IAB rules and uses the
+base stylesheet's tokens. Set `styles: false` so the components use those
+stylesheets:
+
+```tsx title="src/consent.tsx (partial)"
+import 'c15t/react/styles.css';
+import 'c15t/react/iab/styles.css';
+
+// In the ConsentProvider options:
+styles: false,
+```
+
+Tailwind CSS 3 also needs the
+[PostCSS plugin](../../customization/tailwind.md#set-up-tailwind-css-3).
+
 ## Restrict how vendors use a purpose
 
 Publisher restrictions override a vendor's declared use of one purpose. Pass

package/docs/frameworks/react/quickstart.md

@@ -80,7 +80,9 @@ The snapshot is fixed at build time:
 
 * Rebuild after changing policies, translations or vendors. If your CI caches
   build output, force a fresh build.
-* The build must reach the backend. A failed fetch fails the build.
+* The build must reach the backend. A failed fetch stops Next.js, TanStack
+  Start, SvelteKit and Vite builds. By default, Astro and Nuxt log a warning
+  instead and fetch the policy at runtime.
 * Consent choices still go to the backend.
 
 Run `vite build` or `vite dev` before a standalone `tsc`, `vue-tsc` or
@@ -134,8 +136,6 @@ 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',
@@ -187,8 +187,8 @@ createRoot(root).render(
 
 Keep `Consent` mounted for the life of the app. If you use a client-side
 router, render the router inside `Consent` so navigation does not remount the
-provider. The stylesheet import in `src/consent.tsx` styles the banner and
-dialog; import it once.
+provider. There is no stylesheet to import: the banner and dialog render their
+own rules as `<style>` elements.
 
 ## Gate your own features
 

package/docs/frameworks/react/rendering.md

@@ -76,7 +76,9 @@ The snapshot is fixed at build time:
 
 * Rebuild after changing policies, translations or vendors. If your CI caches
   build output, force a fresh build.
-* The build must reach the backend. A failed fetch fails the build.
+* The build must reach the backend. A failed fetch stops Next.js, TanStack
+  Start, SvelteKit and Vite builds. By default, Astro and Nuxt log a warning
+  instead and fetch the policy at runtime.
 * Consent choices still go to the backend.
 
 Run `vite build` or `vite dev` before a standalone `tsc`, `vue-tsc` or
@@ -125,8 +127,8 @@ browser takes over after hydration:
 * The server render and the first browser render agree, so hydration does not
   warn or change a stored choice.
 
-One detail differs from the Vite setup: import `c15t/react/styles.css` where
-your framework loads global CSS, so the server HTML links it.
+The Vite setup needs no change. The banner renders in the browser and brings
+its own `<style>` element, so there is no stylesheet to import.
 
 ### Skip the browser's first init request
 

package/docs/frameworks/react/scripts.md

@@ -40,8 +40,6 @@ 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',

package/docs/frameworks/react/troubleshooting.md

@@ -44,6 +44,28 @@ A policy with `prompt: 'none'` shows no banner by design, and so does a
 returning visitor with a valid stored choice. [Policies](../../concepts/policies.md)
 explains why a region may not show one.
 
+## The page throws that no IABProvider is mounted
+
+The visitor's policy uses the `iab` model and the backend sent its vendor
+list, but no `IABProvider` is mounted. The standard banner and dialog do
+not handle the IAB model, so they throw rather than leave the visitor
+with no consent UI. Server and browser render the same error.
+
+Fix it one of two ways:
+
+* If the site uses IAB TCF, render `IABProvider` with `IABConsentBanner`
+  and `IABConsentDialog` from `c15t/react/iab` inside your consent
+  provider. They can sit next to the standard banner.
+* If it does not, remove the `iab` model from the policy for that region
+  in your Inth project or policy pack.
+
+A backend that answers `gvl: null` turns IAB off for that request. The
+policy then runs as opt-in and nothing throws.
+
+The check passes once `c15t/react/iab` has loaded. If you import the IAB
+components with a dynamic `import()`, a render of the standard banner
+that happens before the import finishes still throws.
+
 ## Inspect the active policy
 
 Render this component inside `ConsentProvider`. It reads state and records no
@@ -91,13 +113,27 @@ covers the options.
 ## The banner has no styles
 
 **Check.** In DevTools Elements, the banner has classes but no rules apply.
-
-**Fix.** Import `c15t/react/styles.css` once in the module that renders the
-provider. With Tailwind 3, keep that import above the `@tailwind` directives
-and add `c15t/postcss-tailwind3` before `tailwindcss` in your PostCSS
-config. Without the plugin, Tailwind 3 drops c15t's rules or fails the build
-with `` `@layer components` is used but no matching `@tailwind components` directive is present ``.
-See [Tailwind CSS](../../customization/tailwind.md#set-up-tailwind-css-3).
+Look for c15t's `<style>` element: `<style data-href="c15t-first-paint">` in
+`<head>` on React 19, or `<style data-c15t-styles>` next to the banner on
+React 18 or with a `nonce`. Check the console for a Content Security Policy
+error.
+
+**Fix.**
+
+* No c15t `<style>` element: the provider sets `styles: false` or `noStyle`.
+  With `styles: false`, import `c15t/react/styles.css` once in the module
+  that renders the provider.
+* The console reports a blocked inline style: set the provider's `nonce`, as
+  [Content Security Policy](./content-security-policy.md)
+  shows.
+* Under Tailwind 3, buttons lose their padding and cards their borders:
+  Tailwind 3's unlayered preflight beats c15t's layered rules. Set
+  `styles: false`, import `c15t/react/styles.css` above the `@tailwind`
+  directives and add `c15t/postcss-tailwind3` before `tailwindcss` in your
+  PostCSS config. Without the plugin, Tailwind 3 drops c15t's rules or fails
+  the build with
+  `` `@layer components` is used but no matching `@tailwind components` directive is present ``.
+  See [Tailwind CSS](../../customization/tailwind.md#set-up-tailwind-css-3).
 
 ## The console warns that theme tokens are no longer turned into CSS
 

package/docs/frameworks/react/upgrade-v3.md

@@ -51,13 +51,13 @@ Remove `@c15t/react` and `@c15t/scripts`, then install `c15t` from the
 
 Drop `@c15t/integrations@alpha` if you don't use its vendor helpers.
 
-| v2 import                               | v3 import                             |
-| --------------------------------------- | ------------------------------------- |
-| `@c15t/react`                           | `c15t/react`                          |
-| `@c15t/react/headless`                  | `c15t/react/headless`                 |
-| `@c15t/react/styles.css`                | `c15t/react/styles.css`               |
-| `DevTools` from `@c15t/dev-tools/react` | `DevTools` from `c15t/react/devtools` |
-| `@c15t/scripts/*`                       | `@c15t/integrations/*`                |
+| v2 import                               | v3 import                                                                          |
+| --------------------------------------- | ---------------------------------------------------------------------------------- |
+| `@c15t/react`                           | `c15t/react`                                                                       |
+| `@c15t/react/headless`                  | `c15t/react/headless`                                                              |
+| `@c15t/react/styles.css`                | Nothing: remove the import. Keep `c15t/react/styles.css` only with `styles: false` |
+| `DevTools` from `@c15t/dev-tools/react` | `DevTools` from `c15t/react/devtools`                                              |
+| `@c15t/scripts/*`                       | `@c15t/integrations/*`                                                             |
 
 `@c15t/react` is still published at v3, so its imports keep working if you pin
 it to `@alpha`. These docs use `c15t/react`.
@@ -448,16 +448,22 @@ A generated theme uses `:root:root`, so your own `--c15t-*` values on plain
 
 ### Stylesheets
 
-* Dialog and preference styles moved from `styles.css` to
-  `@c15t/ui/styles/dialog.css`. The React, Next.js and TanStack Start dialogs
-  import it themselves. Import it yourself only if you render `@c15t/ui`
-  class maps for those parts.
-* `iab/styles.css` no longer repeats the default tokens. Import it after
-  `styles.css`.
-* Tailwind CSS 3 builds now fail without a PostCSS plugin, even with
-  `styles.tw3.css`, because the dialog stylesheet is imported from JavaScript.
-  Add `'c15t/postcss-tailwind3': {}` before `tailwindcss` in
-  `postcss.config`. See [Tailwind CSS 3](../../customization/tailwind.md#set-up-tailwind-css-3).
+* Remove the c15t stylesheet import, such as `@c15t/react/styles.css` or
+  `@c15t/nextjs/styles.css`. The stock components in `c15t/react`,
+  `c15t/next` and `c15t/tanstack-start` render the rules they use as
+  `<style>` elements, so no stylesheet request holds back the first paint. An
+  import you keep still styles the components, but the rules ship twice and
+  the stylesheet still delays the first paint.
+* Keep an import of the v3 stylesheet, such as `c15t/react/styles.css`, only
+  with Tailwind CSS 3 or a named cascade layer, and set
+  `styles: false` in the provider options so the components add no second
+  copy. See
+  [stylesheets and CSS layers](../../customization/stylesheets.md#import-the-stylesheet-yourself).
+* With manual styles, `iab/styles.css` no longer repeats the default tokens.
+  Import it after `styles.css`. Automatic IAB styling needs neither import.
+* Tailwind CSS 3 needs a PostCSS plugin for c15t's `styles.css`. Add
+  `'c15t/postcss-tailwind3': {}` before `tailwindcss` in `postcss.config`,
+  and set `styles: false`. See [Tailwind CSS 3](../../customization/tailwind.md#set-up-tailwind-css-3).
   Create React App can't run the plugin. The `postcss-tailwind3` codemod adds
   it to an object-form `postcss.config` and warns about configs it can't
   edit.

package/docs/frameworks/react/vendor-consent.md

@@ -22,6 +22,10 @@ TC string instead; see [IAB TCF](./iab.md).
 
 ## Declare the vendors
 
+Built-in `@c15t/integrations` helpers already list their vendor by name, so
+you only declare a vendor for a script of your own, or to replace a helper's
+name and privacy policy.
+
 Declare the vendors next to the scripts in `src/scripts.ts`, using the `vendor`
 slug each script already carries:
 
@@ -66,11 +70,19 @@ helper sets `vendor` to its script ID, so `xPixel()` is `x-pixel`, `gtag()`
 is `gtag` and `cloudflareZaraz()` is `cloudflare-zaraz`. Each
 [vendor guide](../../integrations/overview.md) names its slug.
 
-Declaring a helper's vendor is optional. Without a declaration the script
-still loads with its category, but the dialog has no switch for it. In
-development, c15t logs a console warning that names the slug, so you can
-declare it if visitors should be able to turn it off. Production builds
-skip the warning.
+You don't need to declare a helper's vendor. Each helper also sets
+`vendorDetails` on its script: the vendor's name, privacy policy, homepage
+and legal entity. The dialog lists the vendor with its own switch from
+those. Declare the vendor in `vendors` to replace them, for example to link
+your own data processing notice, or when you self-host a tool such as
+Matomo, Umami, Plausible or PostHog and the vendor's privacy policy doesn't
+cover your install. A declaration replaces `vendorDetails` as a whole and
+doesn't merge with it.
+
+Your own scripts can set `vendorDetails` too. A script with a `vendor` slug
+and no `name` and `privacyPolicyUrl` from any source still loads with its
+category, but the dialog has no switch for it. In development, c15t logs a
+console warning that names the slug. Production builds skip the warning.
 
 A self-hosted backend can declare vendors too. `/init` returns them and c15t
 merges them with the vendors in code. When both declare the same `id`, the
@@ -165,8 +177,8 @@ the same as withdrawing a category, so code the vendor already ran stops.
 Test the production build in a private window with DevTools Network open and
 filtered to `ads-twitter.com`:
 
-1. Declare `x-pixel` and register `xPixel()`. Open Privacy settings. The
-   marketing row lists X Pixel with a switch.
+1. Register `xPixel()`. Open Privacy settings. The marketing row lists X
+   Pixel with a switch.
 2. Allow marketing and save. `uwt.js` loads.
 3. Open Privacy settings, switch X Pixel off and save. c15t reloads the
    page. After the reload there is no `uwt.js` request, and other marketing

package/docs/guides/banner-experiments.md

@@ -32,8 +32,6 @@ import type { ReactNode } from 'react';
 
 import { scripts } from './scripts';
 
-import 'c15t/react/styles.css';
-
 const mode = hosted({ url: 'https://your-project.inth.app' });
 
 // `control` is the stock banner. `wall` blocks the page until the visitor

package/docs/guides/troubleshooting.md

@@ -49,14 +49,14 @@ Mixing v2 and v3 packages is not supported.
 
 No banner is sometimes correct. Find out which case you have:
 
-| What DevTools shows                                | Cause                                                                                                                       | Fix                                                                                                                                                                                     |
-| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| The backend request failed or has a CORS error     | Wrong backend URL, or your origin is not trusted                                                                            | Copy the URL from your Inth project exactly, including any path. Add the site's origin, such as `https://www.example.com` or `http://localhost:3000`, to the project's trusted origins. |
-| Requests go to `your-project.inth.app` and fail    | The placeholder backend URL from the guides is still in your code                                                           | Replace `https://your-project.inth.app` with the URL from your Inth project, including any path prefix.                                                                                 |
-| No backend request at all                          | No provider mounted, or the provider runs in offline mode                                                                   | Check `window.c15t`. Confirm the provider receives `hosted()` with your backend URL, or the `backendURL` option your framework uses.                                                    |
-| The policy resolved and no prompt is needed        | The visitor's location maps to a policy without a prompt, such as a US state without a privacy law in the recommended rules | Expected. Test from a location that needs a prompt. Server helpers such as Next.js `resolveConsent` accept a `country` override for testing; remove it before you deploy.               |
-| The policy resolved and a choice is stored         | A returning visitor                                                                                                         | Expected. Clear site data or use a private window.                                                                                                                                      |
-| The banner is in the DOM but invisible or unstyled | The stylesheet is missing, or loaded before Tailwind CSS 4                                                                  | Import your framework's c15t stylesheet from your global CSS. See [customization](../customization/overview.md).                                                                        |
+| What DevTools shows                                | Cause                                                                                                                                                                                                          | Fix                                                                                                                                                                                     |
+| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| The backend request failed or has a CORS error     | Wrong backend URL, or your origin is not trusted                                                                                                                                                               | Copy the URL from your Inth project exactly, including any path. Add the site's origin, such as `https://www.example.com` or `http://localhost:3000`, to the project's trusted origins. |
+| Requests go to `your-project.inth.app` and fail    | The placeholder backend URL from the guides is still in your code                                                                                                                                              | Replace `https://your-project.inth.app` with the URL from your Inth project, including any path prefix.                                                                                 |
+| No backend request at all                          | No provider mounted, or the provider runs in offline mode                                                                                                                                                      | Check `window.c15t`. Confirm the provider receives `hosted()` with your backend URL, or the `backendURL` option your framework uses.                                                    |
+| The policy resolved and no prompt is needed        | The visitor's location maps to a policy without a prompt, such as a US state without a privacy law in the recommended rules                                                                                    | Expected. Test from a location that needs a prompt. Server helpers such as Next.js `resolveConsent` accept a `country` override for testing; remove it before you deploy.               |
+| The policy resolved and a choice is stored         | A returning visitor                                                                                                                                                                                            | Expected. Clear site data or use a private window.                                                                                                                                      |
+| The banner is in the DOM but invisible or unstyled | c15t's rules are missing: `styles: false` without an imported stylesheet, a Content Security Policy that blocks c15t's `<style>` elements, Tailwind CSS 3's preflight, or a SvelteKit app without `c15tHandle` | See [stylesheets and CSS layers](../customization/stylesheets.md) for how your framework loads c15t's rules.                                                                            |
 
 Do not "fix" a missing banner by granting every category or turning c15t off.
 While the policy is unresolved, every optional category stays denied. Turning
@@ -135,7 +135,7 @@ every optional category stays denied.
 
 ## Why does my theme do nothing?
 
-Check that the c15t stylesheet loads, that you set a token or slot the
+Check that c15t's rules load, that you set a token or slot the
 component actually reads, and that the state attribute you target is on the
 element you style. A `data-variant` on the banner root is not on its card.
 Check the Tailwind version and CSS layer order before adding specificity. See

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@c15t/react",
-	"version": "3.0.0-alpha.8",
+	"version": "3.0.0-alpha.9",
 	"description": "React cookie banner, consent manager, preference center, and headless CMP components with IAB TCF and Consent Mode support.",
 	"keywords": [
 		"ccpa",
@@ -254,16 +254,16 @@
 		"test:watch": "bun prebuild && vitest"
 	},
 	"dependencies": {
-		"@c15t/core": "3.0.0-alpha.8",
-		"@c15t/dev-tools": "3.0.0-alpha.8",
-		"@c15t/iab": "3.0.0-alpha.8",
+		"@c15t/core": "3.0.0-alpha.9",
+		"@c15t/dev-tools": "3.0.0-alpha.9",
+		"@c15t/iab": "3.0.0-alpha.9",
 		"@c15t/schema": "3.0.0-alpha.7",
 		"@c15t/translations": "3.0.0-alpha.6",
-		"@c15t/ui": "3.0.0-alpha.8",
+		"@c15t/ui": "3.0.0-alpha.9",
 		"@types/google.maps": "3.65.3"
 	},
 	"devDependencies": {
-		"@c15t/backend": "3.0.0-alpha.8",
+		"@c15t/backend": "3.0.0-alpha.9",
 		"@c15t/conformance": "0.0.1",
 		"@c15t/typescript-config": "0.0.1",
 		"@c15t/vitest-config": "1.0.0",