Split Button Dropdown

<!--
  The primary half runs the default action on click; only the narrow chevron half
  owns the menu, so IT - not the whole control - carries aria-haspopup,
  aria-expanded and its own aria-label ("More actions"). The secondary list is an
  ordinary role="menu" with the standard arrow-key ring, anchored right-0 and
  width-capped so it never escapes a 320px viewport.
-->
<div class="relative inline-block">
  <div class="inline-flex divide-x divide-blue-500 overflow-hidden rounded-lg shadow-sm">
    <button type="button" class="bg-blue-600 px-3.5 py-2 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white dark:bg-blue-600 dark:hover:bg-blue-500">Publish</button>
    <button type="button" aria-haspopup="menu" aria-expanded="true" aria-controls="sp-menu" aria-label="More actions" class="flex items-center bg-blue-600 px-2 py-2 text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white dark:bg-blue-600 dark:hover:bg-blue-500">
      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" /></svg>
    </button>
  </div>

  <ul id="sp-menu" role="menu" aria-label="Publish" class="absolute right-0 top-[calc(100%+0.375rem)] z-20 min-w-52 max-w-[calc(100vw-2rem)] rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
    <li role="none"><button type="button" role="menuitem" class="block w-full rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:bg-gray-100 focus-visible:text-gray-900 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:bg-gray-800 dark:focus-visible:text-gray-100">Save as draft</button></li>
    <li role="none"><button type="button" role="menuitem" class="block w-full rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:bg-gray-100 focus-visible:text-gray-900 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:bg-gray-800 dark:focus-visible:text-gray-100">Schedule…</button></li>
    <li role="none"><button type="button" role="menuitem" class="block w-full rounded-md px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:bg-gray-100 focus-visible:text-gray-900 focus-visible:outline-none dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:bg-gray-800 dark:focus-visible:text-gray-100">Save as template</button></li>
  </ul>
</div>