@c15t/react 3.0.0-alpha.1 → 3.0.0-alpha.11

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

@@ -1,26 +1,49 @@
 ---
 title: ConsentBanner
-description: Pre-built consent banner shown when consent is required.
+description: Render the c15t consent banner in a React app, choose its variant
+  and position, and compose its parts.
 group: frameworks
 ---
 
-## Usage
-
-```tsx
-import { ConsentBanner, ConsentDialog, ConsentProvider, offline } from 'c15t/react';
-import { policyRulePresets } from '@c15t/schema';
-
-const mode = offline({ policyRules: [policyRulePresets.europeOptIn()] });
+## Render the banner inside `ConsentProvider`
+
+Render `ConsentBanner` once inside `ConsentProvider`, next to `ConsentDialog`.
+The [quickstart](../quickstart.md) mounts both in
+`src/consent.tsx`:
+
+```tsx title="src/consent.tsx"
+import { posthog } from '@c15t/integrations/posthog';
+import {
+	ConsentBanner,
+	ConsentDialog,
+	ConsentDialogLink,
+	ConsentProvider,
+	hosted,
+} from 'c15t/react';
+import type { ReactNode } from 'react';
+
+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 function Consent({ children }: { children: React.ReactNode }) {
-	return (
-		<ConsentProvider options={{ mode }}>
-			{children}
-			<ConsentBanner />
-			<ConsentDialog />
-		</ConsentProvider>
-	);
-}
+export const Consent = ({ children }: { children: ReactNode }) => (
+	<ConsentProvider options={options}>
+		{children}
+		<ConsentBanner />
+		<ConsentDialog />
+		<footer>
+			<ConsentDialogLink>Privacy settings</ConsentDialogLink>
+		</footer>
+	</ConsentProvider>
+);
 ```
 
 The banner renders whatever the active policy rule requires. It reads the rule
@@ -122,16 +145,14 @@ button through the provider's theme:
 ```ts
 const theme = {
 	colors: { primary: '#2f6f4e', primaryHover: '#24563c' },
-	consentActions: {
-		primary: { variant: 'primary', mode: 'filled' },
-	},
+	consentActions: { primary: { variant: 'primary', mode: 'filled' } },
 } as const;
 ```
 
 Pass `theme` in `ConsentProvider` options. Per-action theme overrides such
 as `consentActions.dismiss` take precedence over this primary style.
-See [Styling](../styling/overview.md) for tokens and slots, and
-[Policy presets](../concepts/policy-presets.md) for the rule IDs and coverage.
+See [customize](../customize.md) for tokens and slots, and
+[policies](../../../concepts/policies.md) for the rule IDs and coverage.
 
 ## Variants
 
@@ -143,14 +164,14 @@ Set the variant on the banner, or on the provider under
 `presentation.prompt` when every banner should share it. The prop wins.
 
 ```tsx
-<ConsentBanner variant="floating" position="bottom-center" />
+<ConsentBanner variant="floating" position="bottom-center" />;
 ```
 
 A floating card in a corner or centered on an edge. This is the default for
 every prompt. A notice keeps the same card, with its right link and "OK" in the footer.
 
 ```tsx
-<ConsentBanner variant="bar" position="top" />
+<ConsentBanner variant="bar" position="top" />;
 ```
 
 A bar across the full width of the viewport. From 1024px wide the text, the
@@ -158,14 +179,14 @@ right links, and the controls share one row. Opt in to it for regions that
 expect a classic cookie bar.
 
 ```tsx
-<ConsentBanner variant="widget" position="bottom-right" />
+<ConsentBanner variant="widget" position="bottom-right" />;
 ```
 
 A compact card with smaller type. The full description and its legal links
 remain visible. Pair it with a short notice.
 
 ```tsx
-<ConsentBanner variant="wall" />
+<ConsentBanner variant="wall" />;
 ```
 
 A centered card over a backdrop that blocks the page until the visitor
@@ -248,7 +269,7 @@ Use the individual parts when you need a different order or your own markup:
 	<ConsentBanner.RightLink right="opt-out" asChild>
 		<a href="/privacy/do-not-sell">Do not sell or share my data</a>
 	</ConsentBanner.RightLink>
-</ConsentBanner.Rights>
+</ConsentBanner.Rights>;
 ```
 
 `useBannerCopy()` returns the title, description, and prompt kind the banner

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

@@ -16,15 +16,17 @@ same `ConsentProvider`; the [quickstart](../quickstart.md) mounts both.
 import { ConsentDialogLink } from 'c15t/react';
 
 export function SiteFooter() {
-  return (
-    <footer>
-      <nav aria-label="Legal">
-        <a href="/privacy">Privacy policy</a>
-        <a href="/terms">Terms</a>
-        <ConsentDialogLink className="footer-link">Privacy settings</ConsentDialogLink>
-      </nav>
-    </footer>
-  );
+	return (
+		<footer>
+			<nav aria-label="Legal">
+				<a href="/privacy">Privacy policy</a>
+				<a href="/terms">Terms</a>
+				<ConsentDialogLink className="footer-link">
+					Privacy settings
+				</ConsentDialogLink>
+			</nav>
+		</footer>
+	);
 }
 ```
 
@@ -37,8 +39,8 @@ To reuse an existing link component, pass `asChild`:
 
 ```tsx
 <ConsentDialogLink asChild>
-  <a href="#cookie-preferences">Manage cookies</a>
-</ConsentDialogLink>
+	<a href="#cookie-preferences">Manage cookies</a>
+</ConsentDialogLink>;
 ```
 
 ## Props

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

@@ -1,35 +1,20 @@
 ---
 title: ConsentDialogTrigger
-description: Floating button and toolbar that reopen the preference center after
-  the first prompt.
+description: Add the c15t ConsentDialogTrigger floating button or toolbar inside
+  a React ConsentProvider so visitors can reopen the preference center after the
+  first prompt.
 group: frameworks
 ---
 
-## Usage
+## Add the trigger inside ConsentProvider
 
-`ConsentDialogTrigger` is a draggable floating button that opens the preference center. Place it once, next to the banner and dialog, so visitors can revisit their choices without a footer link.
+`ConsentDialogTrigger` is a draggable floating button that opens the preference center. Place it once inside `ConsentProvider`, next to the banner and dialog from the [quickstart](../quickstart.md), so visitors can revisit their choices without a footer link.
 
-```tsx
-import {
-  ConsentBanner,
-  ConsentDialog,
-  ConsentDialogTrigger,
-  ConsentProvider,
-  offline,
-} from 'c15t/react';
-import { policyRulePresets } from '@c15t/schema';
-
-const mode = offline({ policyRules: [policyRulePresets.europeOptIn()] });
-
-export function App() {
-  return (
-    <ConsentProvider options={{ mode }}>
-      <ConsentBanner />
-      <ConsentDialog />
-      <ConsentDialogTrigger showWhen="after-prompt" />
-    </ConsentProvider>
-  );
-}
+```tsx title="src/consent.tsx"
+import { ConsentDialogTrigger } from 'c15t/react';
+
+// Inside the ConsentProvider from your quickstart, next to the dialog:
+<ConsentDialogTrigger showWhen="after-prompt" />;
 ```
 
 `showWhen="after-prompt"` keeps the button out of the way while a choice or notice is still owed and shows it once the visitor has answered, so the banner and the trigger never compete for the same corner. The default, `always`, shows it whenever the preference center is closed.
@@ -56,43 +41,63 @@ Use `ConsentDialogTriggerToolbar` when you want app-owned controls beside the pr
 import { ConsentDialogTriggerToolbar } from 'c15t/react';
 
 <ConsentDialogTriggerToolbar
-  ariaLabel="Site controls"
-  actions={[
-    {
-      id: 'theme',
-      label: isDark ? 'Switch to light theme' : 'Switch to dark theme',
-      icon: isDark ? <SunIcon /> : <MoonIcon />,
-      pressed: isDark,
-      onSelect: toggleColorScheme,
-    },
-    {
-      id: 'support',
-      label: 'Open support chat',
-      icon: <ChatIcon />,
-      onSelect: openSupportChat,
-    },
-  ]}
-  preferences={{
-    icon: 'fingerprint',
-    label: 'Manage privacy settings',
-  }}
-/>
+	ariaLabel="Site controls"
+	actions={[
+		{
+			id: 'theme',
+			label: isDark ? 'Switch to light theme' : 'Switch to dark theme',
+			icon: isDark ? <SunIcon /> : <MoonIcon />,
+			pressed: isDark,
+			onSelect: toggleColorScheme,
+		},
+		{
+			id: 'support',
+			label: 'Open support chat',
+			icon: <ChatIcon />,
+			onSelect: openSupportChat,
+		},
+	]}
+	preferences={{ icon: 'fingerprint', label: 'Manage privacy settings' }}
+/>;
 ```
 
 Each custom action needs a stable `id`, an accessible `label`, an `icon`, and an `onSelect` callback. Use `pressed` for toggle actions and `disabled` for unavailable ones. Your app owns the state behind each action. The preferences action moves to the edge nearest the toolbar's snapped corner while custom actions keep their configured order.
 
-The toolbar does not depend on the consent policy. Your actions always render, so a theme toggle stays available while a banner is up. On the toolbar, `showWhen` applies only to the built-in preferences action: `after-prompt` hides that one item while a choice or notice is owed and shows it once the visitor has answered, and `never` leaves it out. The toolbar renders nothing only when it has no visible item. On the single `ConsentDialogTrigger`, `showWhen` applies to the whole control.
-
-No policy, no UI. When no rule has resolved, because resolution failed, no rule matched and you set no default, or init is still withheld, the built-in preferences action and the single `ConsentDialogTrigger` render nothing; app-owned toolbar actions still do. They appear as soon as a rule resolves, without a remount. A rule with `model: 'none'` owes no rights, so the built-in action and the single trigger hide under it too, unless the rule adds `rights: ['preferences']`. The policy chooses what the control says, you choose where and when it sits, and it disappears only when there is nothing to manage.
-
-The built-in action names the strongest right the active rule guarantees. Under a rule that carries the `opt-out` right, such as a US opt-out notice, its accessible name is the translated "Do not sell or share my data" and the button carries `data-right="opt-out"`. Under any other rule it reads "Manage preferences" with `data-right="preferences"`. Either way it opens the preference center, and a `preferences.label` you pass replaces the default. The button also carries `data-c15t-rights` with every right on the rule.
-
 Toolbars are horizontal by default. Set `orientation="vertical"` to stack the actions and switch arrow-key navigation to up and down:
 
 ```tsx
-<ConsentDialogTriggerToolbar orientation="vertical" actions={toolbarActions} />
+<ConsentDialogTriggerToolbar orientation="vertical" actions={toolbarActions} />;
 ```
 
+### When the controls show
+
+Your toolbar actions do not depend on the consent policy, so a theme toggle
+stays available while a banner is up. The built-in preferences action, and the
+single `ConsentDialogTrigger`, follow the policy:
+
+| Situation                                                                                                         | Built-in action and `ConsentDialogTrigger`             |
+| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| A choice or notice is still owed, with `showWhen="after-prompt"`                                                  | Hidden until the visitor answers                       |
+| `showWhen="never"` on the toolbar                                                                                 | Left out of the toolbar                                |
+| No policy rule has resolved: resolution failed, no rule matched and you set no default, or init is still withheld | Hidden; appears without a remount once a rule resolves |
+| The rule has `model: 'none'`                                                                                      | Hidden, unless the rule adds `rights: ['preferences']` |
+| Any other case                                                                                                    | Shown                                                  |
+
+On the toolbar, `showWhen` applies only to the built-in action. On the single
+`ConsentDialogTrigger`, it applies to the whole control. The toolbar renders
+nothing only when it has no visible item.
+
+### What the built-in action says
+
+* Under a rule with the `opt-out` right, such as a US opt-out notice, its
+  accessible name is the translated "Do not sell or share my data" and it
+  carries `data-right="opt-out"`.
+* Under any other rule it reads "Manage preferences" and carries
+  `data-right="preferences"`.
+* Either way it opens the preference center. A `preferences.label` you pass
+  replaces the default name, and the button carries `data-c15t-rights` with
+  every right on the rule.
+
 ### Toolbar props
 
 | Prop              | Type                                     | Default              | Description                                                                                                                                                      |
@@ -107,36 +112,41 @@ Toolbars are horizontal by default. Set `orientation="vertical"` to stack the ac
 | `ariaLabel`       | `string`                                 | `'Privacy controls'` | Accessible name for the toolbar group.                                                                                                                           |
 | `noStyle`         | `boolean`                                | `false`              | Remove the default styling.                                                                                                                                      |
 
+While `<ConsentDevTools>` is mounted, the toolbar adds a DevTools button at
+the end farthest from its corner and opens the DevTools panel beside itself.
+The ready-made `ConsentDialogTrigger` switches to this toolbar layout for as
+long as DevTools is mounted.
+
 ### Toolbar styling
 
 The toolbar follows the standard precedence: bundled styles, then provider slots, then direct `className` and `style` on the toolbar or on one action. Use `noStyle` for a fully custom implementation.
 
 ```tsx
 <ConsentProvider
-  options={{
-    mode: offline({ policyRules: [policyRulePresets.europeOptIn()] }),
-    components: {
-      trigger: {
-        toolbar: { className: 'my-toolbar' },
-        toolbarItem: { className: 'my-toolbar-item' },
-        toolbarIcon: { className: 'my-toolbar-icon' },
-      },
-    },
-  }}
+	options={{
+		mode,
+		components: {
+			trigger: {
+				toolbar: { className: 'my-toolbar' },
+				toolbarItem: { className: 'my-toolbar-item' },
+				toolbarIcon: { className: 'my-toolbar-icon' },
+			},
+		},
+	}}
 >
-  <ConsentDialogTriggerToolbar
-    className="fixed-toolbar"
-    actions={[
-      {
-        id: 'support',
-        label: 'Open support chat',
-        icon: <ChatIcon />,
-        onSelect: openSupportChat,
-        className: 'support-action',
-      },
-    ]}
-  />
-</ConsentProvider>
+	<ConsentDialogTriggerToolbar
+		className="fixed-toolbar"
+		actions={[
+			{
+				id: 'support',
+				label: 'Open support chat',
+				icon: <ChatIcon />,
+				onSelect: openSupportChat,
+				className: 'support-action',
+			},
+		]}
+	/>
+</ConsentProvider>;
 ```
 
 The toolbar slot keys are `trigger.toolbar`, `trigger.toolbarItem`, and `trigger.toolbarIcon`. With `noStyle`, style the current position and interaction state through `data-corner`, `data-dragging`, and `data-snapping` on the toolbar element.

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

@@ -14,32 +14,44 @@ group: frameworks
 code.
 
 ```tsx title="src/consent.tsx"
-import type { ReactNode } from 'react';
+import { posthog } from '@c15t/integrations/posthog';
 import {
-  ConsentBanner,
-  ConsentDialog,
-  ConsentDialogLink,
-  ConsentProvider,
-  hosted,
+	ConsentBanner,
+	ConsentDialog,
+	ConsentDialogLink,
+	ConsentProvider,
+	hosted,
 } from 'c15t/react';
-import 'c15t/react/styles.css';
-
-const backendURL = import.meta.env.VITE_C15T_BACKEND_URL;
-if (!backendURL) throw new Error('Set VITE_C15T_BACKEND_URL');
-const mode = hosted({ url: backendURL });
-
-export function Consent({ children }: { children: ReactNode }) {
-  return (
-    <ConsentProvider options={{ mode }}>
-      {children}
-      <ConsentBanner />
-      <ConsentDialog hideBranding />
-      <footer>
-        <ConsentDialogLink>Privacy settings</ConsentDialogLink>
-      </footer>
-    </ConsentProvider>
-  );
-}
+import type { ReactNode } from 'react';
+
+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={options}>
+		{children}
+		<ConsentBanner />
+		<ConsentDialog />
+		<footer>
+			<ConsentDialogLink>Privacy settings</ConsentDialogLink>
+		</footer>
+	</ConsentProvider>
+);
+```
+
+To hide the "Secured by" tag in the dialog card, pass `hideBranding`:
+
+```tsx
+<ConsentDialog hideBranding />;
 ```
 
 To open it from your own component, set the active surface:
@@ -48,41 +60,41 @@ To open it from your own component, set the active surface:
 import { useSetActiveUI } from 'c15t/react';
 
 export function PrivacyMenuItem() {
-  const setActiveUI = useSetActiveUI();
-  return (
-    <button type="button" onClick={() => setActiveUI('dialog')}>
-      Cookie preferences
-    </button>
-  );
+	const setActiveUI = useSetActiveUI();
+	return (
+		<button type="button" onClick={() => setActiveUI('dialog')}>
+			Cookie preferences
+		</button>
+	);
 }
 ```
 
 `ConsentDialogLink` does the same with the policy's rights exposed for
 styling; see [ConsentDialogLink](./consent-dialog-link.md). For a floating
 button, see [ConsentDialogTrigger](./consent-dialog-trigger.md). Under an IAB
-policy, mount `IABConsentDialog` from the [IAB guide](../iab/overview.md)
+policy, mount `IABConsentDialog` from the [IAB guide](../iab.md)
 instead; this dialog stays closed for the `iab` model.
 
 ## Props
 
-| Prop                      | Type                                  | Default                         | Description                                                                                                                                                                                                      |
-| ------------------------- | ------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `open`                    | `boolean`                             | follows the active surface      | Controls the open state. When set, Escape and the dialog's own Save, Accept all and Reject all buttons no longer close it; change the prop instead. A missing policy or an unlisted model still keeps it closed. |
-| `showTrigger`             | `boolean \|ConsentDialogTriggerProps` | `false`                         | Renders a floating `ConsentDialogTrigger` next to the dialog. Pass an object to configure that trigger.                                                                                                          |
-| `models`                  | `Model[]`                             | `['opt-in', 'opt-out', 'none']` | Policy models the dialog responds to. Under a model that is not listed, such as `iab`, it stays closed.                                                                                                          |
-| `legalLinks`              | `(keyof LegalLinks)[] \|null`         | none                            | Which of the links configured in the provider `options.legalLinks` render after the description. Omitting the prop renders none. `null` hides them.                                                              |
-| `hideBranding`            | `boolean`                             | `false`                         | Hides the "Secured by" tag in the card.                                                                                                                                                                          |
-| `uiSource`                | `string`                              | `'dialog'`                      | Source identifier recorded with saves made from this dialog.                                                                                                                                                     |
-| `scrollLock`, `trapFocus` | `boolean`                             | from `blocking`                 | Deprecated. Either one set to `false` makes the dialog non-blocking, unless the provider sets `presentation.preferences.blocking` explicitly, which wins. Prefer the provider option.                            |
-| `disableAnimation`        | `boolean`                             | `false`                         | Skips the enter and exit animation of the backdrop and the card.                                                                                                                                                 |
-| `noStyle`                 | `boolean`                             | `false`                         | Removes the built-in styling from every part.                                                                                                                                                                    |
+| Prop                      | Type                                  | Default                         | Description                                                                                                                                                                                                               |
+| ------------------------- | ------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `open`                    | `boolean`                             | follows the active surface      | Controls the open state. When set, Escape and the dialog's own Save Settings, Accept All and Reject All buttons no longer close it; change the prop instead. A missing policy or an unlisted model still keeps it closed. |
+| `showTrigger`             | `boolean \|ConsentDialogTriggerProps` | `false`                         | Renders a floating `ConsentDialogTrigger` next to the dialog. Pass an object to configure that trigger.                                                                                                                   |
+| `models`                  | `Model[]`                             | `['opt-in', 'opt-out', 'none']` | Policy models the dialog responds to. Under a model that is not listed, such as `iab`, it stays closed.                                                                                                                   |
+| `legalLinks`              | `(keyof LegalLinks)[] \|null`         | none                            | Which of the links configured in the provider `options.legalLinks` render after the description. Omitting the prop renders none. `null` hides them.                                                                       |
+| `hideBranding`            | `boolean`                             | `false`                         | Hides the "Secured by" tag in the card.                                                                                                                                                                                   |
+| `uiSource`                | `string`                              | `'dialog'`                      | Source identifier recorded with saves made from this dialog.                                                                                                                                                              |
+| `scrollLock`, `trapFocus` | `boolean`                             | from `blocking`                 | Deprecated. Either one set to `false` makes the dialog non-blocking, unless the provider sets `presentation.preferences.blocking` explicitly, which wins. Prefer the provider option.                                     |
+| `disableAnimation`        | `boolean`                             | `false`                         | Skips the enter and exit animation of the backdrop and the card.                                                                                                                                                          |
+| `noStyle`                 | `boolean`                             | `false`                         | Removes the built-in styling from every part.                                                                                                                                                                             |
 
 ## Behavior
 
 The dialog is a modal wrapper around the preference center. Its card has a
 header with the title `consentManagerDialog.title` and the description
 `consentManagerDialog.description` followed by the legal links, then the
-same category accordion and Reject all, Accept all and Save actions that
+same category accordion and Reject All, Accept All and Save Settings actions that
 `ConsentWidget` renders, then the branding tag. It mounts through a portal
 into `document.body` after hydration, so it is never part of the server
 HTML.
@@ -93,18 +105,49 @@ it is `dialog`. These set that surface:
 * The Customize button on a `ConsentBanner`, and the "Manage preferences"
   or "Do not sell or share my data" button a notice renders.
 * `ConsentDialogLink` and `ConsentDialogTrigger`.
-* The button in a `Frame` placeholder.
+* The button in a `ConsentGate` placeholder.
 * `useSetActiveUI()('dialog')` in your own component, or `openDialog()`
   from `useHeadlessConsentUI()` on the headless subpath.
 
-The component code is split into its own chunk. It downloads when the
-dialog first opens or when a visitor hovers or focuses a Customize button,
-and renders nothing until that chunk is ready. Passing `open={true}` or
-`showTrigger` loads it on mount.
-
-Without an `open` prop, Escape closes the dialog. Save, Accept all and
-Reject all close it after the save succeeds; a save that fails keeps it
-open. With `open={true}`, these actions leave the dialog visible; the
+The component code is split into its own chunk, so it is not part of the
+first page load. It renders nothing until that chunk is ready, and the
+chunk downloads at the first of these:
+
+* The browser's first idle period after the page's `load` event, while the
+  banner is shown or a `ConsentDialogLink`, `ConsentDialogTrigger`,
+  `ConsentGate` button or other button that opens the dialog is mounted.
+  This covers a visitor who taps or presses Enter with no hover or focus
+  first. Browsers without `requestIdleCallback`, such as Safari, wait
+  200 ms after `load` instead.
+* Hover or focus on a button that opens the dialog.
+* The dialog opening.
+
+Passing `open={true}` or `showTrigger` loads it on mount. A visit with
+saved consent and nothing on the page that opens the dialog never
+downloads it.
+
+Idle loading is skipped when the visitor has Save-Data on
+(`navigator.connection.saveData`), on a `2g` or `slow-2g` connection, and
+while offline; hover and focus still load it. To load the chunk only on
+hover, focus or open, set `preloadDialog: 'intent'` in the provider
+options. The default is `'idle'`. With Next.js, pass it through
+`ConsentRoot`'s `options` prop.
+
+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 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
+Reject All close it as soon as the choice is recorded in the browser, in
+the same task as the click; the exit animation still plays. The request to
+the backend runs afterwards and never reopens the dialog: a failed request
+keeps the choice, reports through `onError` and is retried later. See
+[when a choice is saved](../../../concepts/consent-state.md#when-a-choice-is-saved)
+for the order of events. A draft that went stale because the policy changed keeps the dialog open
+for review. With `open={true}`, these actions leave the dialog visible; the
 parent must set `open={false}` to close it. Clicking the backdrop does not
 close it. Closing discards toggles that were not saved: the next open starts
 from the recorded choice again. After a save from an uncontrolled dialog,
@@ -138,11 +181,12 @@ The panel carries `role="dialog"`, `aria-labelledby="consent-dialog-title"`
 and `aria-describedby="consent-dialog-description"`, plus `aria-modal="true"`
 while it is blocking. Its `dir` attribute follows the active language.
 
-While blocking, focus moves on open to the panel itself rather than to a
-button, so a screen reader announces the title and description first; Tab
-then enters the legal links and category switches, Tab and Shift+Tab wrap
-inside the panel, and on close focus returns to the element that opened the
-dialog. A non-blocking dialog manages no focus: nothing moves focus into the
+While blocking, focus moves on open to the first tabbable control in the
+panel, so a keyboard user sees the focus ring on a control rather than
+around the whole panel; the `aria-labelledby` and `aria-describedby`
+wiring means a screen reader still announces the title and description as
+focus enters. Tab and Shift+Tab wrap inside the panel, and on close focus
+returns to the element that opened the dialog. A non-blocking dialog manages no focus: nothing moves focus into the
 panel or back to the opener. The backdrop is `aria-hidden` and is not
 focusable.
 
@@ -186,9 +230,18 @@ for the stock structure are `dialog.root`, `dialog.container`,
 `dialog.card`, `dialog.header`, `dialog.title`, `dialog.content`,
 `dialog.overlay`, `description.dialog`, `manager.footer` and `tag.dialog`.
 
+`ConsentDialog` from the package root and from the
+`c15t/react/consent-dialog` subpath is the deferred component described
+under Behavior, and each `ConsentDialog.<Part>` loads with the same chunk.
+`c15t/react/components/consent-dialog` exports the dialog without the
+deferral, plus each part as a named export (`Card`, `Header`, `Overlay`,
+`Root` and the rest). Importing from that path puts the dialog's code in
+the bundle of every page that imports it, so the first open needs no
+download but every visitor downloads the dialog.
+
 The compound parts import from `c15t/react` as properties of `ConsentDialog`,
 and `ConsentWidget` from the same module. See
-[Styling](../styling/overview.md) for slots and tokens.
+[customize](../customize.md) for slots and tokens.
 
 ## Verify