<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <!-- Header / Introduction -->
  <div class="tw-callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>DROPDOWN:</strong> Custom dropdown for selecting options with rich content<br>
      <strong>VARIANTS:</strong> Simple | Scrollable | Checkable (Multi-select) | With Icons | Sizes | Borderless | Icon
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Use dropdowns when there's a limited set of predefined options, options are too numerous to display directly,
      or when users need to make a single selection from many choices. Requires JavaScript (Stimulus controller).
    </p>
  </div>
  <!-- Section 1: Simple Dropdown -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Simple Dropdown</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Simple Dropdown:</strong> Basic single-select dropdown with checkmark indicator on selected item.
        Click to open, select an option to close.
      </p>
    </div>
    <div class="tw:flex tw:flex-wrap tw:gap-4">
      <!-- Dropdown with placeholder -->
      <div class="tw-dropdown tw-dropdown-block" class="tw:max-w-[280px]" data-controller="dropdown">
        <button class="tw-dropdown-trigger"
                type="button"
                aria-haspopup="listbox"
                aria-expanded="false"
                data-dropdown-target="trigger"
                data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Please select an option</span>
          <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
        </button>
        <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="1">
            <span class="tw-dropdown-item-text">1st menu item</span>
            <i class="fa-solid fa-check tw-dropdown-item-check"></i>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2">
            <span class="tw-dropdown-item-text">2nd menu item</span>
            <i class="fa-solid fa-check tw-dropdown-item-check"></i>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="3">
            <span class="tw-dropdown-item-text">3rd menu item</span>
            <i class="fa-solid fa-check tw-dropdown-item-check"></i>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="4">
            <span class="tw-dropdown-item-text">4th menu item</span>
            <i class="fa-solid fa-check tw-dropdown-item-check"></i>
          </button>
        </div>
      </div>
      <!-- Dropdown with pre-selected value -->
      <div class="tw-dropdown tw-dropdown-block" class="tw:max-w-[280px]" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
        <button class="tw-dropdown-trigger"
                type="button"
                aria-haspopup="listbox"
                aria-expanded="false"
                data-dropdown-target="trigger"
                data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <span class="tw-dropdown-label" data-dropdown-target="label">2nd menu item</span>
          <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
        </button>
        <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="1">
            <span class="tw-dropdown-item-text">1st menu item</span>
            <i class="fa-solid fa-check tw-dropdown-item-check"></i>
          </button>
          <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2">
            <span class="tw-dropdown-item-text">2nd menu item</span>
            <i class="fa-solid fa-check tw-dropdown-item-check"></i>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="3">
            <span class="tw-dropdown-item-text">3rd menu item</span>
            <i class="fa-solid fa-check tw-dropdown-item-check"></i>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="4">
            <span class="tw-dropdown-item-text">4th menu item</span>
            <i class="fa-solid fa-check tw-dropdown-item-check"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-dropdown" data-controller="dropdown">...</div></code>
    </div>
  </div>
  <!-- Section 2: Scrollable Dropdown -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Scrollable Dropdown (Long List)</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Scrollable:</strong> For long lists, add <code>.dropdown-menu-scrollable</code> to constrain height with overflow scroll.
      </p>
    </div>
    <div class="tw-dropdown tw-dropdown-block" class="tw:max-w-[280px]" data-controller="dropdown">
      <button class="tw-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
        <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Please select an option</span>
        <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
      </button>
      <div class="tw-dropdown-menu tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1">
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="1">
          <span class="tw-dropdown-item-text">1st menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2">
          <span class="tw-dropdown-item-text">2nd menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="3">
          <span class="tw-dropdown-item-text">3rd menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="4">
          <span class="tw-dropdown-item-text">4th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="5">
          <span class="tw-dropdown-item-text">5th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="6">
          <span class="tw-dropdown-item-text">6th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="7">
          <span class="tw-dropdown-item-text">7th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="8">
          <span class="tw-dropdown-item-text">8th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="9">
          <span class="tw-dropdown-item-text">9th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="10">
          <span class="tw-dropdown-item-text">10th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="11">
          <span class="tw-dropdown-item-text">11th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="12">
          <span class="tw-dropdown-item-text">12th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-dropdown-menu tw-dropdown-menu-scrollable">...</div></code>
    </div>
  </div>
  <!-- Section 3: Checkable Items (Multi-select) -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Checkable Items (Multi-select)</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Multi-select:</strong> Use checkboxes for selecting multiple items. Add <code>data-dropdown-multiple-value="true"</code> to enable multi-select mode. The dropdown stays open after selection.
      </p>
    </div>
    <div class="tw-dropdown tw-dropdown-block" class="tw:max-w-[280px]" data-controller="dropdown" data-dropdown-multiple-value="true">
      <button class="tw-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
        <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Please select options</span>
        <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
      </button>
      <div class="tw-dropdown-menu" role="listbox" aria-multiselectable="true" data-dropdown-target="menu" tabindex="-1">
        <label class="tw-dropdown-check" data-dropdown-target="item">
          <input type="checkbox" class="tw-dropdown-check-input" value="1" data-action="change->dropdown#check" checked>
          <span class="tw-dropdown-check-label">1st menu item</span>
        </label>
        <label class="tw-dropdown-check" data-dropdown-target="item">
          <input type="checkbox" class="tw-dropdown-check-input" value="2" data-action="change->dropdown#check">
          <span class="tw-dropdown-check-label">2nd menu item</span>
        </label>
        <label class="tw-dropdown-check" data-dropdown-target="item">
          <input type="checkbox" class="tw-dropdown-check-input" value="3" data-action="change->dropdown#check">
          <span class="tw-dropdown-check-label">3rd menu item</span>
        </label>
        <label class="tw-dropdown-check" data-dropdown-target="item">
          <input type="checkbox" class="tw-dropdown-check-input" value="4" data-action="change->dropdown#check">
          <span class="tw-dropdown-check-label">4th menu item</span>
        </label>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-dropdown" data-dropdown-multiple-value="true">...</div></code>
    </div>
  </div>
  <!-- Section 4: Items with Icons -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Items with Icons</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Icons:</strong> Add icons to items using <code>.dropdown-item-icon</code> class. Icons appear on the left side of the item text.
      </p>
    </div>
    <div class="tw-dropdown tw-dropdown-block" class="tw:max-w-[280px]" data-controller="dropdown">
      <button class="tw-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
        <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Please select an option</span>
        <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
      </button>
      <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="user">
          <i class="fa-regular fa-user tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">1st menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="settings">
          <i class="fa-regular fa-user tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">2nd menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="docs">
          <i class="fa-regular fa-user tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">3rd menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="help">
          <i class="fa-regular fa-user tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">4th menu item</span>
          <i class="fa-solid fa-check tw-dropdown-item-check"></i>
        </button>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><svg class="tw-dropdown-item-icon">...</svg></code>
    </div>
  </div>
  <!-- Section 5: Size Variants -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Size Variants</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Sizes:</strong> Use <code>.dropdown-sm</code> or <code>.dropdown-lg</code> on the container to change the size of trigger and menu items.
      </p>
    </div>
    <div class="tw:flex tw:flex-wrap tw:items-start tw:gap-4">
      <!-- Small -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Small (.dropdown-sm)</p>
        <div class="tw-dropdown tw-dropdown-sm tw-dropdown-block" class="tw:w-[220px]" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Select option</span>
            <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 1</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 2</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 3</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- Default -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Default</p>
        <div class="tw-dropdown tw-dropdown-block" class="tw:w-[240px]" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Select option</span>
            <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 1</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 2</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 3</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- Large -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Large (.dropdown-lg)</p>
        <div class="tw-dropdown tw-dropdown-lg tw-dropdown-block" class="tw:w-[280px]" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Select option</span>
            <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 1</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 2</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 3</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-dropdown tw-dropdown-sm">...</div></code><br>
      <code><div class="tw-dropdown tw-dropdown-lg">...</div></code>
    </div>
  </div>
  <!-- Section 6: Disabled State -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Disabled State</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Disabled:</strong> Add <code>disabled</code> attribute to the trigger button to disable the entire dropdown.
      </p>
    </div>
    <div class="tw-dropdown tw-dropdown-block" class="tw:max-w-[280px]" data-controller="dropdown">
      <button class="tw-dropdown-trigger"
              type="button"
              disabled
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
        <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Disabled dropdown</span>
        <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
      </button>
      <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
          <span class="tw-dropdown-item-text">Option 1</span>
        </button>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><button class="tw-dropdown-trigger" disabled>...</button></code>
    </div>
  </div>
  <!-- Section 7: Validation States -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Validation States</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Validation:</strong> Add <code>.dropdown-valid</code> or <code>.dropdown-invalid</code> to the container for validation feedback.
      </p>
    </div>
    <div class="tw:flex tw:flex-wrap tw:gap-4">
      <!-- Valid -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Valid</p>
        <div class="tw-dropdown tw-dropdown-valid tw-dropdown-block" class="tw:w-[240px]" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <span class="tw-dropdown-label" data-dropdown-target="label">Valid selection</span>
            <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Valid selection</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- Invalid -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Invalid</p>
        <div class="tw-dropdown tw-dropdown-invalid tw-dropdown-block" class="tw:w-[240px]" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Please select</span>
            <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 1</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-dropdown tw-dropdown-valid">...</div></code><br>
      <code><div class="tw-dropdown tw-dropdown-invalid">...</div></code>
    </div>
  </div>
  <!-- Section 8: Borderless Variant -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Borderless Variant</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Borderless:</strong> Add <code>.dropdown-borderless</code> to remove the border from the trigger. Focus ring still appears on focus for accessibility.
      </p>
    </div>
    <div class="tw:flex tw:flex-wrap tw:items-start tw:gap-4">
      <!-- Borderless Default -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Borderless</p>
        <div class="tw-dropdown tw-dropdown-borderless tw-dropdown-block" class="tw:w-[240px]" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Select option</span>
            <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 1</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 2</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 3</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- Borderless Small -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Borderless Small</p>
        <div class="tw-dropdown tw-dropdown-borderless tw-dropdown-sm tw-dropdown-block" class="tw:w-[200px]" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Select option</span>
            <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 1</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 2</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 3</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- Borderless Large -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Borderless Large</p>
        <div class="tw-dropdown tw-dropdown-borderless tw-dropdown-lg tw-dropdown-block" class="tw:w-[280px]" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <span class="tw-dropdown-label tw-dropdown-placeholder" data-dropdown-target="label">Select option</span>
            <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 1</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 2</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Option 3</span>
              <i class="fa-solid fa-check tw-dropdown-item-check"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-dropdown tw-dropdown-borderless">...</div></code>
    </div>
  </div>
  <!-- Section 9: Icon Variant -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Icon Variant</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Icon:</strong> Add <code>.dropdown-icon</code> to create a square icon-only trigger button (matching <code>.btn-icon</code> dimensions).
        Chevron and label are hidden automatically. Always include <code>aria-label</code> for accessibility.
        Composes with <code>.dropdown-borderless</code> for toolbar-style transparent triggers.
      </p>
    </div>
    <div class="tw:flex tw:flex-wrap tw:items-start tw:gap-6">
      <!-- Bordered icon dropdown -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Bordered (default)</p>
        <div class="tw-dropdown tw-dropdown-icon" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-label="More options"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <i class="fa-solid fa-ellipsis-vertical"></i>
          </button>
          <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-solid fa-pen tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Edit</span>
            </button>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-regular fa-copy tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Duplicate</span>
            </button>
            <div class="tw-dropdown-divider"></div>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-solid fa-trash tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Delete</span>
            </button>
          </div>
        </div>
      </div>
      <!-- Borderless icon dropdown (toolbar style) -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Borderless (toolbar)</p>
        <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-label="More options"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <i class="fa-solid fa-ellipsis-vertical"></i>
          </button>
          <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-solid fa-pen tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Edit</span>
            </button>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-regular fa-copy tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Duplicate</span>
            </button>
            <div class="tw-dropdown-divider"></div>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-solid fa-trash tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Delete</span>
            </button>
          </div>
        </div>
      </div>
      <!-- Size variants -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Small (.dropdown-sm)</p>
        <div class="tw-dropdown tw-dropdown-icon tw-dropdown-sm" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-label="More options"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <i class="fa-solid fa-ellipsis-vertical"></i>
          </button>
          <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Edit</span>
            </button>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Delete</span>
            </button>
          </div>
        </div>
      </div>
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Default</p>
        <div class="tw-dropdown tw-dropdown-icon" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-label="More options"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <i class="fa-solid fa-ellipsis-vertical"></i>
          </button>
          <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Edit</span>
            </button>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Delete</span>
            </button>
          </div>
        </div>
      </div>
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Large (.dropdown-lg)</p>
        <div class="tw-dropdown tw-dropdown-icon tw-dropdown-lg" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-label="More options"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <i class="fa-solid fa-ellipsis-vertical"></i>
          </button>
          <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Edit</span>
            </button>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <span class="tw-dropdown-item-text">Delete</span>
            </button>
          </div>
        </div>
      </div>
      <!-- Right-aligned menu -->
      <div>
        <p class="tw:text-sm tw:font-semibold tw:mb-2">Menu right-aligned</p>
        <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
          <button class="tw-dropdown-trigger"
                  type="button"
                  aria-label="More options"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <i class="fa-solid fa-gear"></i>
          </button>
          <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-regular fa-user tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Profile</span>
            </button>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-solid fa-gear tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Settings</span>
            </button>
            <div class="tw-dropdown-divider"></div>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-solid fa-right-from-bracket tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Sign out</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="tw-dropdown tw-dropdown-icon">...</div></code><br>
      <code><div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless">...</div></code><br>
      <code><div class="tw-dropdown tw-dropdown-icon tw-dropdown-sm">...</div></code>
    </div>
  </div>
  <!-- Section 10: Keyboard Navigation -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Keyboard Navigation</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Keyboard Support:</strong> Full keyboard navigation is built-in. Try these keys on any dropdown above:
      </p>
    </div>
    <div class="tw:overflow-x-auto">
      <table class="tw-table tw-table-sm">
        <thead>
          <tr>
            <th>Key</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>Enter</code> / <code>Space</code></td>
            <td>Open menu (if closed) or select highlighted item</td>
          </tr>
          <tr>
            <td><code>Escape</code></td>
            <td>Close menu</td>
          </tr>
          <tr>
            <td><code>↓</code> Arrow Down</td>
            <td>Open menu or move to next item</td>
          </tr>
          <tr>
            <td><code>↑</code> Arrow Up</td>
            <td>Open menu or move to previous item</td>
          </tr>
          <tr>
            <td><code>Home</code></td>
            <td>Jump to first item</td>
          </tr>
          <tr>
            <td><code>End</code></td>
            <td>Jump to last item</td>
          </tr>
          <tr>
            <td><code>Tab</code></td>
            <td>Close menu and move focus</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- Quick Reference Footer -->
  <div class="tw:border-t tw:pt-6 tw:mt-8">
    <div class="tw-callout">
      <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p>
      <p class="tw:mb-0 tw:text-xs tw:font-mono">
        <strong>Container:</strong> .dropdown | .dropdown-block (full width)<br>
        <strong>Trigger:</strong> .dropdown-trigger | .dropdown-label | .dropdown-placeholder | .dropdown-chevron<br>
        <strong>Menu:</strong> .dropdown-menu | .dropdown-menu-scrollable | .dropdown-menu-end | .dropdown-menu-top<br>
        <strong>Items:</strong> .dropdown-item | .dropdown-item-icon | .dropdown-item-text | .dropdown-item-check | .dropdown-item.active<br>
        <strong>Checkable:</strong> .dropdown-check | .dropdown-check-input | .dropdown-check-label<br>
        <strong>Extras:</strong> .dropdown-divider | .dropdown-header<br>
        <strong>Sizes:</strong> .dropdown-sm | .dropdown-lg<br>
        <strong>Validation:</strong> .dropdown-valid | .dropdown-invalid<br>
        <strong>Style:</strong> .dropdown-borderless | .dropdown-icon<br>
        <strong>Stimulus:</strong> data-controller="dropdown" | data-dropdown-multiple-value="true"
      </p>
    </div>
  </div>
</div>