@c15t/nextjs 2.0.0-rc.6 → 2.0.0-rc.7

package/dist/iab/styles.tw3.css

@@ -0,0 +1 @@
+@import "@c15t/react/iab/styles.tw3.css";

package/dist/styles.tw3.css

@@ -0,0 +1 @@
+@import "@c15t/react/styles.tw3.css";

package/dist/version.cjs

@@ -1 +1 @@
-"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{version:()=>version});const version="2.0.0-rc.6";for(var __rspack_i in exports.version=__webpack_exports__.version,__webpack_exports__)-1===["version"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{version:()=>version});const version="2.0.0-rc.7";for(var __rspack_i in exports.version=__webpack_exports__.version,__webpack_exports__)-1===["version"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/version.js

@@ -1 +1 @@
-let e="2.0.0-rc.6";export{e as version};
+let e="2.0.0-rc.7";export{e as version};

package/dist-types/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.0.0-rc.6";
+export declare const version = "2.0.0-rc.7";

package/docs/building-headless-components.md

@@ -4,6 +4,9 @@ description: Build policy-aware custom consent components in Next.js using the h
 ---
 Building headless components is easier now because c15t exposes policy-aware primitives instead of forcing you to reconstruct banner rules by hand.
 
+> ⚠️ **Warning:**
+> Headless is the last step in the customization ladder. Use this guide only when pre-built components, tokens, slots, compound components, and noStyle are no longer sufficient.
+
 The headless stack is:
 
 * `useHeadlessConsentUI()` for policy-aware banner/dialog actions, ordering, layout, and primary actions hints

package/docs/components/consent-banner.md

@@ -1,6 +1,6 @@
 ---
 title: ConsentBanner
-description: A pre-built consent banner that appears when user consent is needed. Supports custom layout, button arrangement, and full compound component composition.
+description: A pre-built consent banner that appears when user consent is needed. Supports policy-aware layout, theming, and advanced composition when markup must change.
 ---
 `ConsentBanner` is a ready-to-use consent banner that appears automatically in **opt-in jurisdictions** (like GDPR) where explicit consent is required before tracking. In opt-out jurisdictions (like CCPA), the banner won't appear — users get an opt-out mechanism instead. It includes reject, accept, and customize buttons with configurable layout.
 
@@ -18,20 +18,6 @@ export function ConsentManager() {
 }
 ```
 
-## Customizing Content
-
-Override the default title, description, and button labels:
-
-```tsx
-<ConsentBanner
-  title="We value your privacy"
-  description="We use cookies to enhance your browsing experience and analyze site traffic."
-  acceptButtonText="Accept all"
-  rejectButtonText="Reject all"
-  customizeButtonText="Manage preferences"
-/>
-```
-
 ## Button Layout
 
 The `layout` prop controls button arrangement. Each item is either a button ID or an array of button IDs (which groups them together):
@@ -86,6 +72,37 @@ Use the provider `theme` prop to control how stock consent actions look:
 
 Policy packs control grouping, ordering, and direction. The theme controls button appearance.
 
+## Styling First
+
+> ℹ️ **Info:**
+> For pure theming, stay inside the pre-built banner. Start with layout props, theme.consentActions, design tokens, and theme.slots before reaching for compound components. See Styling Overview.
+
+The stock banner maps common visual changes to the theme system:
+
+* Card background -> `theme.colors.surface`
+* Footer background -> `theme.colors.surfaceHover`
+* Card, footer, and title tweaks -> `theme.slots.consentBannerCard`, `consentBannerFooter`, and `consentBannerTitle`
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    theme: {
+      colors: {
+        surface: '#fffdf8',
+        surfaceHover: '#f6f3ee',
+      },
+      slots: {
+        consentBannerCard: 'rounded-[28px] shadow-xl',
+        consentBannerFooter: 'border-t border-black/10 px-6',
+        consentBannerTitle: 'tracking-tight',
+      },
+    },
+  }}
+>
+  <ConsentBanner />
+</ConsentManagerProvider>
+```
+
 ### Primary Button
 
 Highlight specific button(s) as the primary action:
@@ -116,9 +133,40 @@ Control which legal links appear in the banner description:
 > ℹ️ **Info:**
 > Legal link URLs are configured in the ConsentManagerProvider options via the legalLinks prop, not on the banner itself.
 
-## Compound Components
+## Customizing Copy
+
+Prefer provider `i18n` when you want to rename the stock banner content:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    i18n: {
+      locale: 'en',
+      messages: {
+        en: {
+          cookieBanner: {
+            title: 'We value your privacy',
+            description: 'We use cookies to improve the site and measure performance.',
+          },
+          common: {
+            acceptAll: 'Accept all',
+            rejectAll: 'Reject all',
+            customize: 'Manage preferences',
+          },
+        },
+      },
+    },
+  }}
+>
+  <ConsentBanner />
+</ConsentManagerProvider>
+```
+
+Direct text props such as `title`, `description`, and `acceptButtonText` are still supported for one-off overrides, but `i18n` is the preferred path for copy changes.
 
-Build fully custom banner layouts using sub-components:
+## Advanced: Compound Components
+
+Use compound components only when the stock banner structure is no longer enough and you need to rearrange existing c15t primitives:
 
 ```tsx
 <ConsentBanner.Root>
@@ -142,7 +190,7 @@ Build fully custom banner layouts using sub-components:
 * `ConsentBanner.Root` — Outermost container, provides theme context
 * `ConsentBanner.Card` — Main content card with optional focus trapping
 * `ConsentBanner.Header` — Contains title and description
-* `ConsentBanner.Title` — Heading, defaults to translation `consentBanner.title`
+* `ConsentBanner.Title` — Heading, defaults to translation `cookieBanner.title`
 * `ConsentBanner.Description` — Description text, supports `legalLinks` prop
 * `ConsentBanner.Footer` — Action buttons container
 * `ConsentBanner.FooterSubGroup` — Groups related buttons together
@@ -151,6 +199,8 @@ Build fully custom banner layouts using sub-components:
 * `ConsentBanner.AcceptButton` — Accepts all consent
 * `ConsentBanner.Overlay` — Optional backdrop overlay
 
+If you only need styling changes, stay with tokens and slots instead of rebuilding the banner layout.
+
 ## Props
 
 ### ConsentBannerProps

package/docs/components/consent-dialog.md

@@ -81,9 +81,36 @@ Hide the c15t branding in the dialog footer:
 <ConsentDialog hideBranding />
 ```
 
-## Compound Components
+## Styling First
 
-Build fully custom dialog layouts using sub-components:
+> ℹ️ **Info:**
+> If you are only changing visuals, stay with the stock dialog and use the theme system first. Start with tokens and slots such as consentDialogCard, consentDialogHeader, and consentDialogFooter. See Styling Overview.
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    theme: {
+      colors: {
+        surface: '#fffdf8',
+        surfaceHover: '#f6f3ee',
+      },
+      slots: {
+        consentDialogCard: 'rounded-[32px] shadow-xl',
+        consentDialogHeader: 'gap-3',
+        consentDialogFooter: 'border-t border-black/10 px-6',
+      },
+    },
+  }}
+>
+  <ConsentDialog />
+</ConsentManagerProvider>
+```
+
+Dialog copy should be changed through `ConsentManagerProvider.options.i18n`, not by rebuilding the dialog structure.
+
+## Advanced: Compound Components
+
+Use compound components only when you need custom dialog markup while still keeping c15t primitives:
 
 ```tsx
 <ConsentDialog.Root>
@@ -118,6 +145,8 @@ For a quick pre-composed layout, use the shorthand card:
 </ConsentDialog.Root>
 ```
 
+If the stock dialog structure still works, prefer tokens, slots, and provider configuration instead.
+
 ## Props
 
 ### ConsentDialogProps

package/docs/components/consent-widget.md

@@ -35,9 +35,36 @@ export function PrivacySettingsPage() {
 
 Each consent category is rendered as an expandable accordion item. Clicking the category header expands it to show a description and any associated services. Users can toggle individual categories on or off using the switch control. The `necessary` category is always enabled and cannot be toggled.
 
-## Compound Components
+## Styling First
 
-Build fully custom widget layouts using sub-components:
+> ℹ️ **Info:**
+> Most widget customization should stay in the stock component. Use theme tokens and slots such as consentWidgetAccordion, consentWidgetFooter, and toggle before reaching for compound components. See Styling Overview.
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    theme: {
+      colors: {
+        surface: '#fffdf8',
+        surfaceHover: '#f6f3ee',
+      },
+      slots: {
+        consentWidgetAccordion: 'rounded-3xl border border-black/10',
+        consentWidgetFooter: 'border-t border-black/10 px-6',
+        toggle: 'shadow-sm',
+      },
+    },
+  }}
+>
+  <ConsentWidget />
+</ConsentManagerProvider>
+```
+
+Widget copy should be changed through `ConsentManagerProvider.options.i18n` so the inline UI stays aligned with the rest of the consent experience.
+
+## Advanced: Compound Components
+
+Use compound components only when you need to rearrange the widget's existing primitives:
 
 ```tsx
 <ConsentWidget.Root>
@@ -68,6 +95,8 @@ Build fully custom widget layouts using sub-components:
 * `ConsentWidget.RejectButton` — Rejects all consent
 * `ConsentWidget.SaveButton` — Saves custom selections
 
+If the stock widget structure is already correct, stay with tokens and slots instead of rebuilding the layout.
+
 ## Props
 
 ### ConsentWidgetProps

package/docs/headless.md

@@ -4,11 +4,12 @@ description: Build fully custom consent UI using only hooks - no pre-built compo
 ---
 c15t's headless mode means using the hooks (`useConsentManager`, `useTranslations`, etc.) without any pre-built UI components. This gives you complete control over the consent experience.
 
-There are three levels of customization:
+Before you go headless, walk the customization ladder in order:
 
-1. **Props** - Use pre-built components with custom text and configuration
-2. **noStyle** - Use pre-built components with their structure but strip all styles
-3. **Headless** - Use only hooks and build the entire UI yourself
+1. **Pre-built components** - Use provider options, component props, tokens, slots, and `theme.consentActions`
+2. **Compound components** - Rearrange c15t primitives when the markup order must change
+3. **`noStyle`** - Keep c15t structure but replace its styling
+4. **Headless** - Use only hooks and build the entire UI yourself
 
 ## When to Go Headless
 
@@ -18,10 +19,15 @@ Go headless when:
 * You need a consent flow that doesn't fit the banner/dialog pattern
 * You want to embed consent choices inline rather than as overlays
 
-Use `noStyle` instead when:
+Use a lower-power tool instead when:
 
-* The component structure works but the styling doesn't
-* You want to apply your own CSS/Tailwind without fighting defaults
+* The component structure works but the styling doesn't -> use tokens, slots, or `noStyle`
+* You only need to rearrange existing c15t parts -> use compound components
+* You want to change copy -> use `ConsentManagerProvider.options.i18n`
+* You only need to restyle stock actions -> use `theme.consentActions`
+
+> ⚠️ **Warning:**
+> Headless mode is not the first answer for pure theming. If you are still trying to debug why a banner footer color did not change, stay in the styling system and verify the token-to-component mapping before you rebuild the UI.
 
 > ℹ️ **Info:**
 > Need a policy-aware implementation guide? See Building Headless Components.

package/docs/styling/classnames.md

@@ -2,15 +2,11 @@
 title: Class Names
 description: Style consent components using className props and per-slot className targeting via the theme.
 ---
-## Component className
+## Prefer Slots for Stock Components
 
-All consent components accept a `className` prop:
+There is no single top-level `className` contract across every pre-built consent component.
 
-```tsx
-<ConsentBanner className="my-banner" />
-<ConsentDialog className="my-dialog" />
-<ConsentWidget className="my-widget" />
-```
+For the stock `ConsentBanner`, `ConsentDialog`, and `ConsentWidget`, prefer `theme.slots` first. That keeps the markup intact and lets you target the exact part you need.
 
 ## Per-Slot className
 
@@ -59,9 +55,19 @@ const theme = {
 }
 ```
 
-## noStyle Mode
+## When to Use Raw className
+
+Use raw className-level styling when:
+
+* your styling system is already class-driven
+* tokens are too broad for the change
+* slots already identify the correct element
 
-Use `noStyle` when you want to remove defaults and style from scratch:
+If the request is "make the banner footer darker", prefer `theme.colors.surfaceHover` first. If the request is "add a border and spacing only to the footer", prefer `theme.slots.consentBannerFooter`.
+
+## Advanced: `noStyle`
+
+Use `noStyle` only when you want to remove defaults and style from scratch while still keeping c15t's component structure:
 
 ```tsx
 {/* Remove all styles from a specific component */}
@@ -81,4 +87,6 @@ const theme = {
 } satisfies Theme;
 ```
 
+Treat `noStyle` as an advanced escape hatch. Do not jump to it just because a token or slot needs debugging.
+
 For full custom markup and behavior, continue to [Headless Mode](../headless).

package/docs/styling/overview.md

@@ -2,24 +2,34 @@
 title: Styling Overview
 description: Five approaches for theming consent components — design tokens, component slots, CSS variables, className, and noStyle mode.
 ---
-c15t's theming system gives you multiple levels of control, from high-level design tokens to complete style removal.
+c15t's theming system gives you multiple levels of control, but most customization should stay inside the pre-built components.
 
-The flow:
+Start with the lowest-power tool that solves the problem:
 
-1. **Define** tokens (colors, spacing, radius, etc.) in JavaScript
-2. Tokens are **injected** as CSS custom properties (`--c15t-*`) at runtime
-3. Components **consume** these variables in their default styles
-4. You **override** at any level: tokens, slots, CSS variables, or raw classNames
+1. **Pre-built component APIs** — provider options and component props such as `layout`, `direction`, `primaryButton`, `legalLinks`, and `theme.consentActions`
+2. **Design tokens** — global colors, typography, spacing, radius, shadows, and motion
+3. **Slots** — targeted styling for specific parts such as the banner card, footer, or title
+4. **CSS variables or className-level overrides** — when you need to integrate with external CSS systems
+5. **Compound components** — when you must rearrange markup while still using c15t primitives
+6. **`noStyle`** — when you want c15t structure but you need to own all visual styling
+7. **Headless** — when you want fully custom markup and behavior
+
+Keep styling and escalation as separate decisions:
+
+* If you are still using the stock banner, dialog, or widget, stay with props, tokens, and slots.
+* Escalate to compound components, `noStyle`, or headless only when the structure or behavior itself must change.
 
 ## Styling Approaches
 
 |Approach|Control|Use When|
 |--|--|--|
+|**Component and provider APIs**|High|Reordering actions, changing button emphasis, configuring links, hiding branding, changing copy via `i18n`|
 |**Tokens**|High|Changing global colors, typography, spacing, radius, shadows, or motion|
-|**Slots**|Medium|Targeting specific component parts (e.g., the banner title, dialog footer)|
-|**CSS Variables**|Medium|Overriding `--c15t-*` variables from external CSS|
-|**className**|Medium|Passing class names to components or slots|
-|**noStyle**|Full|Removing all default styles, building from scratch|
+|**Slots**|Medium|Targeting specific component parts (for example `consentBannerFooter` or `consentDialogCard`)|
+|**CSS variables / className**|Medium|Integrating with an existing stylesheet or utility classes after tokens and slots|
+|**Compound components**|Structure|Rearranging existing c15t primitives without going fully custom|
+|**noStyle**|Full visuals|Keeping c15t structure but replacing all visual defaults|
+|**Headless**|Full|Replacing both markup and behavior|
 
 ## Quick Start
 
@@ -58,9 +68,25 @@ export function ConsentManager({ children }) {
 }
 ```
 
-## Styling Paths
+## Styling Inside Pre-Built Components
+
+Start here before you consider compound components or headless mode.
+
+### 1. Provider and component configuration
+
+Use the stock APIs first:
+
+* `layout`, `direction`, and `primaryButton` for banner action arrangement
+* `legalLinks` for link visibility
+* `hideBranding` and `showTrigger` for dialog and widget behavior
+* `theme.consentActions` for stock banner and dialog button treatment
+* `i18n` on `ConsentManagerProvider` for copy changes
+
+```tsx
+<ConsentBanner layout={['customize', ['reject', 'accept']]} primaryButton="accept" />
+```
 
-### 1. Design tokens
+### 2. Design tokens
 
 Set global values for colors, typography, spacing, radius, shadows, and motion:
 
@@ -68,55 +94,140 @@ Set global values for colors, typography, spacing, radius, shadows, and motion:
 options={{ theme: { colors: { primary: '#6366f1' } } }}
 ```
 
-### 2. Component slots
+Use tokens first when the change is semantic:
+
+* Banner card background -> `theme.colors.surface`
+* Banner footer background -> `theme.colors.surfaceHover`
+* Shared copy color -> `theme.colors.text` and `theme.colors.textMuted`
+
+```tsx
+options={{
+  theme: {
+    colors: {
+      surface: '#ffffff',
+      surfaceHover: '#f6f3ee',
+    },
+  },
+}}
+```
+
+### 3. Component slots
 
 Target specific component parts via the `slots` object:
 
 ```tsx
-options={{ theme: { slots: { consentBannerTitle: 'text-2xl font-bold' } } }}
+options={{
+  theme: {
+    slots: {
+      consentBannerCard: 'rounded-[28px] shadow-xl',
+      consentBannerFooter: 'border-t border-black/10',
+      consentBannerTitle: 'tracking-tight',
+    },
+  },
+}}
 ```
 
-### 3. CSS variables
+Use slots when the component part is right but the local styling needs adjustment.
 
-Override `--c15t-*` custom properties in your stylesheet.
+### 4. CSS variables and className-level overrides
 
-### 4. className prop
+Override `--c15t-*` custom properties in your stylesheet or attach classes through slots when your app styling is driven externally.
 
-Pass className directly to components:
+Reach for this after tokens and slots, not before.
 
 ```tsx
-<ConsentBanner className="my-custom-banner" />
+options={{
+  theme: {
+    slots: {
+      consentBannerFooter: 'bg-[var(--banner-footer)]',
+    },
+  },
+}}
 ```
 
-### 5. noStyle prop
+## Escalating Beyond Pre-Built Components
+
+Only move up this ladder when the lower rung cannot satisfy the request.
 
-Strip all default styles and build from scratch (best paired with [Headless Mode](../headless)):
+### 5. Compound components
+
+Use compound components when you need to rearrange existing c15t primitives:
+
+```tsx
+<ConsentBanner.Root>
+  <ConsentBanner.Card>
+    <ConsentBanner.Header>
+      <ConsentBanner.Title />
+      <ConsentBanner.Description />
+    </ConsentBanner.Header>
+    <ConsentBanner.Footer>
+      <ConsentBanner.CustomizeButton />
+      <ConsentBanner.FooterSubGroup>
+        <ConsentBanner.RejectButton />
+        <ConsentBanner.AcceptButton />
+      </ConsentBanner.FooterSubGroup>
+    </ConsentBanner.Footer>
+  </ConsentBanner.Card>
+</ConsentBanner.Root>
+```
+
+### 6. `noStyle`
+
+Use `noStyle` only when the c15t structure is still correct but you want to replace all visual defaults:
 
 ```tsx
 <ConsentBanner noStyle />
 ```
 
+### 7. Headless
+
+Go headless only when you are replacing both markup and behavior. For that path, continue to [Headless Mode](../headless).
+
 ## Common Styling Tasks
 
-### Change brand color globally
+### Change the banner footer background
 
 ```tsx
-options={{ theme: { colors: { primary: '#0ea5e9', primaryHover: '#0284c7' } } }}
+options={{
+  theme: {
+    colors: {
+      surfaceHover: '#f6f3ee',
+    },
+  },
+}}
 ```
 
-### Make the banner card more compact
+Use `theme.colors.surfaceHover` before trying raw CSS.
+
+### Change the banner card background
 
 ```tsx
-options={{ theme: { spacing: { md: '0.75rem', lg: '1rem' } } }}
+options={{
+  theme: {
+    colors: {
+      surface: '#fffdf8',
+    },
+  },
+}}
 ```
 
-### Round primary/secondary buttons
+Use `theme.colors.surface` before overriding banner CSS variables directly.
+
+### Tweak the banner card, footer, or title styling without changing markup
 
 ```tsx
-options={{ theme: { slots: { buttonPrimary: 'rounded-full', buttonSecondary: 'rounded-full' } } }}
+options={{
+  theme: {
+    slots: {
+      consentBannerCard: 'rounded-[28px] shadow-xl',
+      consentBannerFooter: 'border-t border-black/10 px-6',
+      consentBannerTitle: 'text-xl tracking-tight',
+    },
+  },
+}}
 ```
 
-### Change consent action button styles semantically
+### Change stock consent action button styles semantically
 
 ```tsx
 options={{
@@ -132,6 +243,29 @@ options={{
 
 Use `theme.consentActions` when you want to change the stock banner/dialog button treatment without rewriting the component layout. Policy packs still control action arrangement and primary-action hints. The theme controls whether those actions render as `stroke`, `filled`, `ghost`, or `lighter`.
 
+### Change banner copy without replacing the component
+
+```tsx
+options={{
+  i18n: {
+    locale: 'en',
+    messages: {
+      en: {
+        cookieBanner: {
+          title: 'We value your privacy',
+          description: 'We use cookies to improve the site and measure performance.',
+        },
+        common: {
+          acceptAll: 'Accept all',
+          rejectAll: 'Reject all',
+          customize: 'Manage preferences',
+        },
+      },
+    },
+  },
+}}
+```
+
 ### Enable dark mode safely
 
 ```tsx
@@ -144,8 +278,11 @@ options={{
 }}
 ```
 
+> ℹ️ **Info:**
+> If a token change does not show up where you expect, check how that component maps tokens to CSS variables before escalating. For example, the stock banner footer background comes from colors.surfaceHover, not a separate footer token.
+>
 > ⚠️ **Warning:**
-> noStyle: true removes layout and visual defaults. Use it only when you want full control.Use either tokens/slots or raw CSS variable overrides intentionally to avoid conflicting style sources.For dark mode, c15t supports .dark and .c15t-dark.
+> Do not jump to CSS overrides or !important because a token did not appear to work at first glance.noStyle: true removes layout and visual defaults. Treat it as an advanced opt-out, not a normal theming step.Headless mode is for replacing markup and behavior, not for styling-only requests.Use either tokens/slots or raw CSS variable overrides intentionally to avoid conflicting style sources.For dark mode, c15t supports .dark and .c15t-dark.
 
 ## API Reference
 

package/docs/styling/slots.md

@@ -4,7 +4,19 @@ description: Target individual component parts with styles using the slot system
 ---
 ## What are Slots?
 
-Slots let you target specific parts of consent components with styles. Each component is built from named "slots" (e.g., `consentBannerTitle`, `consentDialogFooter`) that you can style individually.
+Slots let you target specific parts of consent components with styles. Each component is built from named slots such as `consentBannerTitle` and `consentDialogFooter`.
+
+Use slots after the stock component APIs and design tokens:
+
+* If the change is semantic, prefer tokens first. For example, the stock banner footer background comes from `theme.colors.surfaceHover`.
+* If the component part is correct but you need a local tweak, use a slot.
+
+Common banner slot choices:
+
+* `consentBannerCard` for card radius, shadow, width, and local background treatment
+* `consentBannerFooter` for spacing, borders, and local footer styling
+* `consentBannerTitle` for title typography
+* `buttonPrimary` and `buttonSecondary` for shared button classes
 
 ## Using Slots
 
@@ -13,8 +25,8 @@ Pass slot styles in the theme's `slots` object:
 ```tsx
 const theme = {
   slots: {
-    // String value = className
-    consentBannerTitle: 'text-xl font-bold text-gray-900',
+    consentBannerFooter: 'border-t border-black/10 px-6',
+    consentBannerTitle: 'text-xl font-bold tracking-tight',
 
     // Object value = className + inline styles
     consentBannerCard: {
@@ -34,13 +46,31 @@ Each slot accepts either a `string` (treated as className) or a `SlotStyle` obje
 consentBannerTitle: 'my-custom-class'
 
 // Object: className + style + noStyle
-consentBannerTitle: {
-  className: 'my-custom-class',
-  style: { color: 'red', fontSize: '1.5rem' },
-  noStyle: false, // Set true to remove default styles for this slot
+consentBannerFooter: {
+  className: 'border-t border-black/10',
+  style: { paddingBlock: '1rem' },
+  noStyle: false, // Set true only when you want to remove this slot's default styling
 }
 ```
 
+`noStyle` on a slot is an advanced escape hatch. Start with className and style overrides first.
+
+## Example: Style the stock banner without changing markup
+
+```tsx
+const theme = {
+  colors: {
+    surface: '#fffdf8',
+    surfaceHover: '#f6f3ee',
+  },
+  slots: {
+    consentBannerCard: 'rounded-[28px] shadow-xl',
+    consentBannerFooter: 'border-t border-black/10 px-6',
+    consentBannerTitle: 'tracking-tight',
+  },
+} satisfies Theme;
+```
+
 ## Available Slots
 
 Use the typed API reference below for the full slot list and descriptions. It stays in sync with the actual component slot surface.

package/docs/styling/tailwind.md

@@ -18,40 +18,32 @@ import '@c15t/nextjs/styles.css';
 
 ### Tailwind v4
 
-Tailwind v4 automatically scans your source files. Declare c15t's layer order once in your global CSS so utilities stay last:
+Tailwind v4 automatically scans your source files. Import Tailwind normally. c15t component styles join Tailwind's `components` layer automatically, so no extra c15t-specific layer declaration is needed:
 
 ```css
-@layer theme, base, components, c15t, utilities;
 @import "tailwindcss";
 ```
 
 ### Tailwind v3
 
-Keep Tailwind's directives in your app stylesheet, but wrap `@tailwind base` in a native `base` layer so c15t's `@layer c15t` rules can sit above Preflight:
+Import the Tailwind 3-compatible c15t stylesheet before your app Tailwind globals, then keep your standard Tailwind directives in the app stylesheet:
 
-```css title="app/globals.css"
-@layer base, components, c15t;
+```tsx title="app/layout.tsx"
+import '@c15t/react/styles.tw3.css';
+import './globals.css';
+```
 
-@layer base {
-  @tailwind base;
-}
+```tsx title="app/layout.tsx"
+import '@c15t/nextjs/styles.tw3.css';
+import './globals.css';
+```
 
+```css title="app/globals.css"
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 ```
 
-Then add c15t's component paths to your `content` array:
-
-```js title="tailwind.config.js"
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@c15t/react/**/*.{js,mjs}',
-    './node_modules/@c15t/nextjs/**/*.{js,mjs}',
-  ],
-};
-```
-
 ## Using Tailwind with Slots
 
 Apply Tailwind classes via the theme's `slots` object:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@c15t/nextjs",
-	"version": "2.0.0-rc.6",
+	"version": "2.0.0-rc.7",
 	"description": "Developer-first CMP for Next.js: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization.",
 	"keywords": [
 		"nextjs",
@@ -33,7 +33,9 @@
 	"type": "module",
 	"exports": {
 		"./styles.css": "./dist/styles.css",
+		"./styles.tw3.css": "./src/styles.tw3.css",
 		"./iab/styles.css": "./dist/iab/styles.css",
+		"./iab/styles.tw3.css": "./src/iab/styles.tw3.css",
 		"./headless": {
 			"types": "./dist-types/headless.d.ts",
 			"import": "./dist/headless.js",
@@ -57,7 +59,11 @@
 		"dist",
 		"docs",
 		"dist-types",
-		"client"
+		"client",
+		"src/styles.css",
+		"src/styles.tw3.css",
+		"src/iab/styles.css",
+		"src/iab/styles.tw3.css"
 	],
 	"scripts": {
 		"prebuild": "genversion --esm --semi src/version.ts",
@@ -72,7 +78,7 @@
 		"test:watch": "bun prebuild && vitest --passWithNoTests"
 	},
 	"dependencies": {
-		"@c15t/react": "2.0.0-rc.6",
+		"@c15t/react": "2.0.0-rc.7",
 		"@c15t/translations": "2.0.0-rc.5",
 		"c15t": "2.0.0-rc.6"
 	},

package/src/iab/styles.css

@@ -0,0 +1,10 @@
+/**
+ * @c15t/nextjs — IAB TCF component styles.
+ *
+ * Import this stylesheet when using IAB consent components in Next.js.
+ * Self-contained — includes shared primitives, no need for base styles.
+ *
+ * Usage:
+ *   import '@c15t/nextjs/iab/styles.css';
+ */
+@import "@c15t/react/iab/styles.css";

package/src/iab/styles.tw3.css

@@ -0,0 +1,10 @@
+/**
+ * @c15t/nextjs/iab — Tailwind 3-compatible IAB component styles.
+ *
+ * Import this stylesheet before your app Tailwind globals so utility classes
+ * can come after the c15t base rules.
+ *
+ * Usage:
+ *   import '@c15t/nextjs/iab/styles.tw3.css';
+ */
+@import "@c15t/react/iab/styles.tw3.css";

package/src/styles.css

@@ -0,0 +1,10 @@
+/**
+ * @c15t/nextjs — Non-IAB prebuilt component styles.
+ *
+ * Import this stylesheet once in your root layout when using
+ * prebuilt (styled) consent components.
+ *
+ * Usage:
+ *   import '@c15t/nextjs/styles.css';
+ */
+@import "@c15t/react/styles.css";

package/src/styles.tw3.css

@@ -0,0 +1,10 @@
+/**
+ * @c15t/nextjs — Tailwind 3-compatible prebuilt component styles.
+ *
+ * Import this stylesheet before your app Tailwind globals so utility classes
+ * can come after the c15t base rules.
+ *
+ * Usage:
+ *   import '@c15t/nextjs/styles.tw3.css';
+ */
+@import "@c15t/react/styles.tw3.css";