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

<section id="intro">
  `ConsentDialogTrigger` is a floating button that opens the consent dialog when clicked. Users can drag it to any corner of the screen, and the position persists across sessions. Use it to give users a persistent way to manage their privacy settings.
</section>

<section id="customization">
  ## Icon Options

  ```tsx
  {/* Built-in icons */}
  <ConsentDialogTrigger icon="branding" />    {/* c15t logo (default) */}
  <ConsentDialogTrigger icon="fingerprint" /> {/* Privacy icon */}
  <ConsentDialogTrigger icon="settings" />    {/* Gear icon */}

  {/* Custom icon */}
  <ConsentDialogTrigger icon={<MyCustomIcon />} />
  ```

  ## Visibility

  Control when the trigger is visible:

  ```tsx
  {/* Always visible (default) */}
  <ConsentDialogTrigger showWhen="always" />

  {/* Only after user has made a consent choice */}
  <ConsentDialogTrigger showWhen="after-consent" />

  {/* Hidden (control visibility programmatically) */}
  <ConsentDialogTrigger showWhen="never" />
  ```

  ## Position

  Set the default corner and control persistence:

  ```tsx
  <ConsentDialogTrigger
    defaultPosition="bottom-left"
    persistPosition={true} // Remembers user's drag position
    onPositionChange={(position) => console.log('Moved to:', position)}
  />
  ```

  ## Size

  ```tsx
  <ConsentDialogTrigger size="sm" /> {/* Small */}
  <ConsentDialogTrigger size="md" /> {/* Medium (default) */}
  <ConsentDialogTrigger size="lg" /> {/* Large */}
  ```

  ## Compound Components

  Build fully custom trigger layouts using sub-components:

  ```tsx
  <ConsentDialogTrigger.Root defaultPosition="bottom-right">
    <ConsentDialogTrigger.Button size="md">
      <ConsentDialogTrigger.Icon icon="settings" />
      <ConsentDialogTrigger.Text>Privacy</ConsentDialogTrigger.Text>
    </ConsentDialogTrigger.Button>
  </ConsentDialogTrigger.Root>
  ```

  * `ConsentDialogTrigger.Root` — Portal wrapper with drag handling and position persistence
  * `ConsentDialogTrigger.Button` — Draggable button element with size variants
  * `ConsentDialogTrigger.Icon` — Icon display (branding, fingerprint, settings, or custom)
  * `ConsentDialogTrigger.Text` — Optional text label
</section>

<section id="props">
  ## Props

  | Property         | Type                                              | Description                                                                                                   | Default                 | Required |
  | :--------------- | :------------------------------------------------ | :------------------------------------------------------------------------------------------------------------ | :---------------------- | :------: |
  | icon             | TriggerIcon                                       | Icon to display in the trigger button.                                                                        | 'branding'              | Optional |
  | defaultPosition  | any                                               | Default corner position for the trigger.&#xA;User can drag to any corner and the position will be remembered. | 'bottom-right'          | Optional |
  | persistPosition  | boolean \| undefined                              | Whether to persist the user's position preference in localStorage.                                            | true                    | Optional |
  | ariaLabel        | string \| undefined                               | Accessible label for the trigger button.                                                                      | 'Open privacy settings' | Optional |
  | className        | string \| undefined                               | Additional CSS class names.                                                                                   | -                       | Optional |
  | noStyle          | boolean \| undefined                              | When true, removes default styling.                                                                           | false                   | Optional |
  | showWhen         | TriggerVisibility \| undefined                    | Controls when the trigger is visible.                                                                         | 'always'                | Optional |
  | size             | TriggerSize \| undefined                          | Size of the trigger button.                                                                                   | 'md'                    | Optional |
  | onClick          | (() => void) \| undefined                         | Callback fired when the trigger is clicked (before opening dialog).                                           | -                       | Optional |
  | onPositionChange | ((position: CornerPosition) => void) \| undefined | Callback fired when the corner position changes.                                                              | -                       | Optional |
</section>