{/* This file is NOT rendered directly. Sections are imported by framework pages. */}

<section id="intro">
  > ❌ **Error:**
  > c15t is not yet IAB certified. The IAB TCF components are under active development and should not be used in production. APIs and behavior may change before certification is achieved.

  `IABConsentBanner` is a pre-built consent banner that follows the [IAB Transparency & Consent Framework (TCF) 2.3](https://iabeurope.eu/tcf-2-0/) specification. It renders when the consent model is set to `'iab'` and includes required disclosures like partner count, purpose summaries, and legitimate interest notices.

  Use this component instead of `ConsentBanner` when you need IAB TCF compliance for programmatic advertising in EU jurisdictions.

  ## When to Use

  * Your site participates in the IAB TCF ecosystem (ad exchanges, SSPs, DSPs)
  * You need to disclose vendor partnerships and data processing purposes per IAB requirements
  * The detected jurisdiction requires IAB TCF compliance (typically EU/EEA)
</section>

<section id="content-to-props">
  > ℹ️ **Info:**
  > The banner only renders when IAB mode is enabled and the GVL (Global Vendor List) has been loaded. If iab.enabled is false or the server does not return GVL data, nothing is rendered.

  ## Banner Content

  The IAB banner automatically displays:

  * **Title** — Heading text from IAB translations
  * **Description** — Includes the partner count (e.g., "We and our \{partnerCount} partners...")
  * **Partners link** — Clickable link that opens the vendor tab in the preference center
  * **Purpose/stack list** — Up to 5 purpose/stack names summarizing data usage, with an "and X more" overflow
  * **Legitimate interest notice** — Required IAB disclosure about legitimate interest processing
  * **Scope notice** — Service-specific scope disclosure

  ## Buttons

  The banner includes three action buttons:

  | Button         | Action                                         |
  | -------------- | ---------------------------------------------- |
  | **Reject All** | Rejects all IAB purposes and closes the banner |
  | **Accept All** | Accepts all IAB purposes and closes the banner |
  | **Customize**  | Opens the IABConsentDialog purposes tab        |

  ### Primary Button

  Highlight a specific button as the primary action:

  ```tsx
  <IABConsentBanner primaryButton="accept" />
  ```

  Options: `'reject'`, `'accept'`, `'customize'` (default: `'customize'`)

  ## Props

  | Property         | Type                                             | Description                                                    | Default       | Required |
  | :--------------- | :----------------------------------------------- | :------------------------------------------------------------- | :------------ | :------: |
  | noStyle          | boolean \| undefined                             | When true, removes all default styling from the component.     | false         | Optional |
  | disableAnimation | boolean \| undefined                             | When true, disables entrance/exit animations.                  | false         | Optional |
  | scrollLock       | boolean \| undefined                             | When true, locks page scroll when the banner is visible.       | true          | Optional |
  | trapFocus        | boolean \| undefined                             | When true, traps keyboard focus within the banner.             | true          | Optional |
  | primaryButton    | "reject" \| "accept" \| "customize" \| undefined | Specifies which button should be highlighted as primary.       | 'customize'   | Optional |
  | models           | any\[] \| undefined                              | Which consent models this banner responds to.                  | \['iab']      | Optional |
  | uiSource         | string \| undefined                              | Override the UI source identifier sent with consent API calls. | 'iab\_banner' | Optional |
</section>