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

<section id="content">
  ## What are Slots?

  Slots let you target specific parts of consent components with styles. Each component is built from named slots such as `consentBannerTitle` and `consentDialogTag`.

  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

  Pass slot styles in the theme's `slots` object:

  ```tsx
  const theme = {
    slots: {
      consentBannerFooter: 'border-t border-black/10 px-6',
      consentBannerTitle: 'text-xl font-bold tracking-tight',

      // Object value = className + inline styles
      consentBannerCard: {
        className: 'rounded-xl shadow-lg',
        style: { maxWidth: '600px' },
      },
    },
  } satisfies Theme;
  ```

  ## Slot Style Types

  Each slot accepts either a `string` (treated as className) or a `SlotStyle` object:

  ```tsx
  // String: treated as className
  consentBannerTitle: 'my-custom-class'

  // Object: className + style + noStyle
  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.

  ## API Reference

  | Property                    | Type                   | Description                                                          | Default | Required |
  | :-------------------------- | :--------------------- | :------------------------------------------------------------------- | :------ | :------: |
  | consentBanner               | SlotStyle \| undefined | Root wrapper for the consent banner portal content.                  | -       | Optional |
  | consentBannerCard           | SlotStyle \| undefined | Main card container for banner content and actions.                  | -       | Optional |
  | consentBannerHeader         | SlotStyle \| undefined | Header region containing title and description.                      | -       | Optional |
  | consentBannerTitle          | SlotStyle \| undefined | Banner title text element.                                           | -       | Optional |
  | consentBannerDescription    | SlotStyle \| undefined | Banner description text element.                                     | -       | Optional |
  | consentBannerFooter         | SlotStyle \| undefined | Footer container for banner action buttons.                          | -       | Optional |
  | consentBannerFooterSubGroup | SlotStyle \| undefined | Nested button group inside the banner footer.                        | -       | Optional |
  | consentBannerTag            | SlotStyle \| undefined | Branding tag rendered above the consent banner card.                 | -       | Optional |
  | consentBannerOverlay        | SlotStyle \| undefined | Backdrop overlay rendered behind the banner when enabled.            | -       | Optional |
  | consentDialog               | SlotStyle \| undefined | Root wrapper for the consent dialog modal.                           | -       | Optional |
  | consentDialogCard           | SlotStyle \| undefined | Main dialog card container.                                          | -       | Optional |
  | consentDialogHeader         | SlotStyle \| undefined | Dialog header region containing title and description.               | -       | Optional |
  | consentDialogTitle          | SlotStyle \| undefined | Dialog title text element.                                           | -       | Optional |
  | consentDialogDescription    | SlotStyle \| undefined | Dialog description text element.                                     | -       | Optional |
  | consentDialogContent        | SlotStyle \| undefined | Dialog content region (typically holds ConsentWidget).               | -       | Optional |
  | consentDialogFooter         | SlotStyle \| undefined | Footer container used by compound dialog layouts.                    | -       | Optional |
  | consentDialogTag            | SlotStyle \| undefined | Branding tag rendered below the stock consent dialog card.           | -       | Optional |
  | consentDialogOverlay        | SlotStyle \| undefined | Backdrop overlay rendered behind the dialog.                         | -       | Optional |
  | consentWidget               | SlotStyle \| undefined | Root wrapper for the consent widget/preferences panel.               | -       | Optional |
  | consentWidgetAccordion      | SlotStyle \| undefined | Accordion region listing consent categories.                         | -       | Optional |
  | consentWidgetFooter         | SlotStyle \| undefined | Footer area for widget actions and links.                            | -       | Optional |
  | consentWidgetTag            | SlotStyle \| undefined | Branding tag rendered below the standalone consent widget.           | -       | Optional |
  | frame                       | SlotStyle \| undefined | Frame wrapper used by blocking placeholders (e.g., iframe blocking). | -       | Optional |
  | iabConsentBanner            | SlotStyle \| undefined | Root wrapper for the IAB consent banner.                             | -       | Optional |
  | iabConsentBannerCard        | SlotStyle \| undefined | Main card container for IAB banner content.                          | -       | Optional |
  | iabConsentBannerHeader      | SlotStyle \| undefined | Header region for IAB banner title/description.                      | -       | Optional |
  | iabConsentBannerFooter      | SlotStyle \| undefined | Footer container for IAB banner actions.                             | -       | Optional |
  | iabConsentBannerTag         | SlotStyle \| undefined | Branding tag rendered above the IAB banner card.                     | -       | Optional |
  | iabConsentBannerOverlay     | SlotStyle \| undefined | Backdrop overlay rendered behind the IAB banner.                     | -       | Optional |
  | iabConsentDialog            | SlotStyle \| undefined | Root wrapper for the IAB consent dialog.                             | -       | Optional |
  | iabConsentDialogCard        | SlotStyle \| undefined | Main card container for IAB dialog content.                          | -       | Optional |
  | iabConsentDialogHeader      | SlotStyle \| undefined | Header region for IAB dialog title/description.                      | -       | Optional |
  | iabConsentDialogFooter      | SlotStyle \| undefined | Footer container for IAB dialog actions.                             | -       | Optional |
  | iabConsentDialogTag         | SlotStyle \| undefined | Branding tag rendered below the IAB dialog card.                     | -       | Optional |
  | iabConsentDialogOverlay     | SlotStyle \| undefined | Backdrop overlay rendered behind the IAB dialog.                     | -       | Optional |
  | buttonPrimary               | SlotStyle \| undefined | Shared primary button style used across consent components.          | -       | Optional |
  | buttonSecondary             | SlotStyle \| undefined | Shared secondary button style used across consent components.        | -       | Optional |
  | toggle                      | SlotStyle \| undefined | Shared toggle/switch style used for category controls.               | -       | Optional |

  | Property  | Type      | Description              | Default |  Required  |
  | :-------- | :-------- | :----------------------- | :------ | :--------: |
  | SlotStyle | SlotStyle | Type alias for SlotStyle | -       | ✅ Required |
</section>